title: How to pass input data between 2 pages in react
body: <p>I've been learning react and trying to get a user input from one page to another. I've tried some different things already like refs and props and redux but I just can't figure it out. My goal is that when data is inserted to the text box and submit is clicked that I could show a list of these entries on the second page.</p>
  
  <p>This is the page for input</p>
  
  <pre><code>import React, { Component } from "react";
  
  class New extends Component {
    constructor(props) {
      super(props);
      this.state = {value: ''};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
    }
  
    handleSubmit(event) {
      alert(this.state.value + ' successfully created');
      event.preventDefault();
    }
  
    render() {
      return (
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;label for="tournyName"&gt;Tournament name:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="tournyName" value= {this.state.value} onChange={this.handleChange}&gt;&lt;/input&gt;
          &lt;button type="submit" value="Submit" class="btn btn-primary"&gt;Create tournament&lt;/button&gt;
        &lt;/form&gt;
      );
    }
  }
  
  export default New;
  </code></pre>
  
  <p>Goal is to have user inputs in this list</p>
  
  <pre><code>import React, { Component } from "react";
  
  class Tournaments extends Component {
    render() {
      return (
        &lt;h2&gt;List of tournaments:&lt;/h2&gt;&lt;br&gt;&lt;/br&gt;
        &lt;ul&gt;
          &lt;li&gt;User created tournament name here&lt;/li&gt;
        &lt;/ul&gt;
      );
    }
  }
  
  export default Tournaments;
  </code></pre>
  
  <p>Thanks for any help in advance.</p>