CODEWITHSUNDEEP
javascriptreactjsstate
Basit
Basit

Reputation: 367

How to get previous state value in reactjs

When I click New Number button, I get a random number from 0 to 15... This works fine, but now I want when I click Previous Number button, it give me the previous number/state.

For example..

As soon the render runs I get 12. then I click New Number button that give me 4, now I want when I click Previous Number this change the state and give me the number which was in the state before, and it was 4. How to achieve this functionality...

I know componendDidUpdate have prevProp and prevState parameters but can't figure out how to call this on click. Here is my code

class App extends React.Component {
   state = {
      randomNum: ''
   }

   componentDidMount() {
      this.getNewRandomNum()
   }

   getNewRandomNum = () => {
      let randomNum = Math.floor(Math.random() * 15)
      this.setState({ randomNum })
      console.log(this.state.randomNum)
   }

   prevNum = () => {

   }
   render() {
      return (
         <div>
            <h1>{this.state.randomNum}</h1>
            <button onClick={this.getNewRandomNum}>New Number</button>
            <button onClick={this.prevNum}>Previous Number</button>
         </div>
      )
   }
}

Would appreciate your help, hope I am clear.

Upvotes: 17

Views: 67937

Answers (4)

Hasan Zahran
Hasan Zahran

Reputation: 1452

I would suggest to use new state as follows:-

const [prevStart, setPrevStart] = useState(1);
const [page, setPage] = useState(1);

const handelPage = (getPage) => {
    if (getPage < prevStart) {
        ///
    }
    if (getPage > prevStart) {
        //
    }
    const target = `?page=${getPage}`
    createBrowserHistory().push({
        pathname: target,
    });
    setPrevStart(getPage);
    setPage(getPage);
}

Or you can use useRef hook to save the previous state. c

onst [name, setName] = useState("");
    const prevName = useRef("");

    useEffect(() => {
prevName.current = name;
    },[name]);

return (
<>
{name}
{prevName.current}
</>

)

Something like this will solve the issue.

Thanks

Upvotes: 5

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15698

Create an additional state-value like previousNum and have that updated with the prevState when you call getRandomNum.

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>
    );
  }
}

Also here's the sandbox: https://codesandbox.io/s/7345kyly21

Upvotes: 14

medicengonzo
medicengonzo

Reputation: 519

I would use Redux to make state change more predictable and easy to manipulate. Taken from this example on the docs.

Basically, your state will look something like this:

{
  counter: {
    past: [0, 1, 2],
    present: 3,
    future: [4]
  }
}

And you use reducers to move the values around.

This way you only need to call dispatch telling it to 'undo' or 'redo' and not moving values every time you need to time travel.

Redux is really awesome!

Upvotes: 1

Brett East
Brett East

Reputation: 4322

I would just store the previous number in the state, this would be the easiest and most common way to do this.

class App extends React.Component {
   state = {
      randomNum: '',
      previousNum: ''
   }

   componentDidMount() {
      this.getNewRandomNum();
   }

   getNewRandomNum = () => {
      let randomNum = Math.floor(Math.random() * 15)
      this.setState((state) => (  // this is the current state
        { 
          previousNum: state.randomNum, // this will be the previous randomNumber
          randomNum
       }));
       console.log(randomNum);
   }

   prevNum = () => {
     alert(this.state.previousNum); // put whatever code you need here
   }

   render() {
      return (
         <div>
            <h1>{this.state.randomNum}</h1>
            <button onClick={this.getNewRandomNum}>New Number</button>
            <button onClick={this.prevNum}>Previous Number</button>
         </div>
      );
   }
}

Upvotes: 0

Related Questions