logo
Tags down

shadow

How to get previous state value in reactjs


By : RedVirusNo1
Date : October 17 2020, 06:10 AM
hope this fix your issue Create an additional state-value like previousNum and have that updated with the prevState when you call getRandomNum.
code :
class App extends React.Component {
  state = {
    randomNum: "",
    previousNum: ""
  };

  componentDidMount() {
    this.getNewRandomNum();
  }

  getNewRandomNum = () => {
    let randomNum = Math.floor(Math.random() * 15);
    this.setState(
      prevState => {
        return {
          randomNum: randomNum,
          previousNum: prevState.randomNum
        };
      },
      () => console.log(this.state)
    );
  };

  getPreviousNum = () => {
    this.setState({
      randomNum: this.state.previousNum,
      previousNum: ""
    }, () => console.log(this.state));
  };

  render() {
    return (
      <div>
        <h1>{this.state.randomNum}</h1>
        <button onClick={this.getNewRandomNum}>New Number</button>
        <button
          onClick={this.getPreviousNum}
          disabled={typeof(this.state.previousNum) === "number" ? false : true}
        >
          Previous Number
        </button>
      </div>
    );
  }
}


Share : facebook icon twitter icon

Go to previous state in reactjs


By : Srez
Date : March 29 2020, 07:55 AM
Does that help You could implement the back button click handler like this in the ReportMainCat component:
code :
handleBackClick() {
  this.setState({ postType: null });
}
changeType = (postType) => {
  this.setState({ 
    lastPostType: this.state.postType,
    postType,
    showMainReportCats: false, 
  });
}
changeType = (postType) => {
  this.setState({ 
    postTypeHistory: [...this.state.postTypeHistory, this.state.postType],
    postType,
    showMainReportCats: false, 
  });
}

handleBackClick() {
  const { postTypeHistory } = this.state;
  const postType = postTypeHistory.pop();
  this.setState({
    postType,
    postTypeHistory,
  });
}

How to refactor to prevent component from losing its previous state (ReactJS)?


By : badar ahmed sheikh
Date : March 29 2020, 07:55 AM
around this issue I solved this answer by storing the conjunction value in the same data array as the filter groups and then passing it as a prop to the conjunction component.
I also passed a handler function from the parent component (FilterGroupSection) to the child component (Conjunction) which is fired when the radio element in the conjunction component is changed. The function is as:
code :
handleConjunctionChange(filterGroupId, conjunctionType) {
    let filterGroupsData = this.state.filterGroupsData; // all filter groups

    const index = filterGroupsData.findIndex(
        group => group.id === filterGroupId
    );

    filterGroupsData[index] = {
        ...filterGroupsData[index], // id, key and filter properties
        conjunctionType: conjunctionType// set/overwrite the property we interested in
    };

    this.setState({ filterGroupsData: filterGroupsData });
}

Go to previous state or Re Render component for two different API functions in ReactJS


By : William Halsey
Date : March 29 2020, 07:55 AM
wish help you to fix your issue In updateLanguagenew method, you can check if the lang selected is All and then call updateLanguage method
code :
updateLanguage(lang) {
    this.setState({
      selectedLanguage: lang,
      repos: null
    });

    fetchPopularRepos(lang).then(
      function (repos) {
        this.setState(function () {
          return { repos: repos };
        });
      }.bind(this)
    );
  }

  updateLanguagenew(lang) {
    if (lang === 'All') {
        this.updateLanguage(lang);
        return;
    }
    this.setState({
      selectedLanguage: lang,
      repos: null
    });
    fetchPopularReposUpdated(lang).then(
      function (repos) {
        this.setState(function () {
          return { repos: repos };
        });
      }.bind(this)
    );
}

How do I return to previous state in reactjs?


By : user3702585
Date : March 29 2020, 07:55 AM
seems to work fine I have created a sidebar component and set its state to false to hide the block until a user clicks on the hanmburger icon, then the state is shown. However I am trying to return(or close the sidebar menu) when the user clicks on the close 'X' icon. I have written a hideMenu method to return the state to false however it doesnt work, and there are no errors. Here is what I have written , You didn't close your tags properly. update your code as per below:
code :
  <div className="sub-flex-container">
        <div className="co pt-4">
      <ul className="flex-container sub-list">
        <li>women</li>
        <li>mens</li>
        <li>health & beauty</li>
      </ul>
      <span onClick={this.showMenu} className="pl-3 hamburger hide-big pb-4"><Icon type="menu" /></span>
      <div className="mobile-menu-display" id="mySidebar" style={{display: this.state.isShown ? 'block' : 'none' }}>
        <span onClick={this.hideMenu} className="float-right font-weight-bold hide-big close">X</span>
      </div>
      </div>


    <div className="co">
...

Reactjs-setState previous state is the first argument, props as the second argument


By : Benjie
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further I have read in this official article these lines: , They say you should do like that instead of the below example.
code :
// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});
 // Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));
Related Posts Related Posts :
  • Sorting an array (JavaScript) by a specific field in it
  • My Variable does not increment when i click a button
  • How to assign a function variable's value as a variable name within a Javascript function
  • How to fix SyntaxError: fields are not currently supported error in JavaScript, Firefox?
  • Electron.js app freezes after an hour unused
  • Understanding how strapi relations works
  • How do I borrow a method of a class without extending it?
  • Can't append child to every DOM element in my array?
  • IOS PWA getUserMedia not work in standalone mode
  • How to find Key value from an object based on the value passed
  • "Missing ) after argument list." in apps script
  • How to get a javascript variable value?
  • How can I update state after sorting
  • How to render screenshot/image inside a frame image without bleeding past frame?
  • Is there a way to register new function to window object?
  • How to send a value to server with post method?
  • How to make an expandable input form for chat
  • How to access the Object property within the method inside the Object in React Hooks
  • How does one return a value from javascript class method?
  • Why can't I reset this form value to blank with javascript?
  • Comparing object string, stringify identity operator and string
  • How to separate the state inside a reusable component
  • How do I filter out 'items' that don't match search result?
  • Is there a way to get elements by specific values
  • Is there a performance benefit to shipping Web Assembly vs minified Javascript?
  • How do I add a counter to show how many times a div element has been clicked?
  • Calling A function using vue.js components and properties
  • How to check type of "typeof" in JavaScript?
  • Recursive function to determine if number is even or odd by subtracting two from n until n = 0 or 1
  • How to fix:"Refused to run the JavaScript URL because it violates the following Content Security Policy..."
  • Can't access value inside of props object
  • How map and filter over array of objects?
  • How to invert d3 color ramps d3-scale-chromatic d3.interpolateViridis
  • Comparing two variables JavaScript
  • Google Pay & Web Payment Request API:
  • How to pass date as parameter in javascript function
  • why i have this error "Expected an assignment or function call and instead saw an expression no-unused-expressions&
  • calculate the full turns of a circle
  • Applying spread operator on object with getter
  • How do I hide a parent div when child div contains a certain text?
  • How to Stream Live Audio With Low Latency
  • React: How to close a modal from child opened from parent component
  • how to find tab close and clear local storage
  • Function returning undefined value, a bit confused
  • Assignment involving generic property of generic object fails to typecheck correctly within generic function
  • What is output for foo.x
  • Remove singular element from an object's key array
  • How to fix lag issue over time in my Three.js game
  • async await promise.all map not resolving promises
  • Print an HTML document to PDF using JavaScript
  • Getting illegal invocation, after using $.ajax inside of $(doocument).keypress function
  • DebounceTime emits all the events which was captred during the time
  • Mongoose 5.x disallows passing a spread of operators
  • javascript onkeypress limit characters when pasting
  • How to fire an event only if specific-time has lapsed after scrolling has been stopped
  • How to filter an array of objects based on another array of objects?
  • Best way to switch between two colours with javascript?
  • Calling asynchronous function but returning result synchronously
  • Can't inject custom repository
  • How do I fix the Cordova error: Failed to fetch platform <<<<< HEAD?
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk