How to get previous state value in reactjs

Question

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.

Answer 1

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

Answer 2

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