/Javascript/React/React router dom two page form

React router dom two page form

handleSubmit = (event) => {
  event.preventDefault();
  this.props.history.replace({
    pathname: "/result",
    state: {
      value:
        "Your saving range is: $" +
        Math.floor(1.69 * this.state.square * (10 / 100)) +
        "- $" +
        Math.floor(1.69 * this.state.square * (30 / 100))
    }
  });
};

class Result extends Component {
  render() {
    return (
      <div className="result">
        <h2>You could save between</h2>
        <h1>{this.props.location.state.value}</h1> // <-- route state
        <NavLink to="/">Use Calculator Again</NavLink>
      </div>
    );
  }
}

Source: stackoverflow.com

Similar codes

0 vote129 views1 answer
Page is loading from previous page scroll in reactjs
Javascript React
0 vote145 views1 answer
React native make safe view in mobile
Javascript React
0 vote139 views2 answers
How to make a bot react to own message js
Javascript React
11 votes138 views3 answers
React Hook "useState" is called in function "cardState" which is neither a React function component or a custom React Hook function
Javascript React
0 vote121 views2 answers
Hiding header in a specific screen in react native
Javascript React
0 vote135 views3 answers
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Javascript React
0 vote121 views1 answer
How to add a key in a react element
Javascript React
0 vote133 views1 answer
Add active class to button onclick react
Javascript React
31 votes131 views2 answers
React-router-dom npm
Javascript React
0 vote126 views1 answer
React native test redux
Javascript React