How to pass a state variable between components

Question

I'm trying to pass down the 'year' state variable to the Playlist class; so far when the user presses enter after filling in an input, the input is saved in Class Home's state variable 'year', but I need it passed down to the Playlist class, and what I've found online isn't suiting it as far as I'm seeing/trying.

class App extends Component {   
  render() {    
    return (
      <Router>
        <div className='App'>
          <Route exact path = '/' component= {Home}/>
          <Route path= '/playlist' component = {Playlist}/>
        </div>
      </Router>
    ); 
  }
}
export default App;

class Home extends Component {
      constructor(props){
         super(props);
         this.state = {
            year: ' '
         };
         this.handleSubmit = this.handleSubmit.bind(this);
         this.updateInput = this.updateInput.bind(this);
      }

      updateInput(event){
         this.setState({year : event.target.value})
      }

      handleSubmit(event){
         alert("Year Submitted");
         this.props.history.push('/playlist');
         event.preventDefault();
      }
  render() {    
     return (
        <div id="body" className="Home">
            <div>
              <form onSubmit={this.handleSubmit}>
                 <input id = "yearInput" autoComplete="off" type="text" placeholder = 
                "Enter Year" onChange={this.updateInput} />
              </form>
            </div>
        </div>
     );
  }
}
export default Home;

class Playlist extends Component{
    constructor(props) {
       super(props);
       this.state = {
         year: ' '
       };
        this.goingBack = this.goingBack.bind(this);
    }

    goingBack(){
        console.log(this.year);
        this.props.history.push("/");
    }

    render(){
        return (
            <div className="Playlist">
                <h1> Playlist </h1>
                <div>
                    <button onClick={this.goingBack}> Go back </button>
                </div>

            </div>
        );
    }
}
export default Playlist;

Answer 1

You can pass in route state. Assuming both are being directly rendered by a Route component, then both have access to route-props.

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      year: ' '
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.updateInput = this.updateInput.bind(this);
  }

  updateInput(event) {
    this.setState({ year: event.target.value })
  }

  handleSubmit(event) {
    alert("Year Submitted");
    this.props.history.push({ // <-- use object form of push
      pathname: '/playlist',
      state: { year: this.state.year },
    });
    event.preventDefault();
  }

  render() {
    return (
      <div id="body" className="Home">
        <div>
          <form onSubmit={this.handleSubmit}>
            <input id="yearInput" autoComplete="off" type="text" placeholder=
              "Enter Year" onChange={this.updateInput} />
          </form>
        </div>
      </div>
    );
  }
}

You can access route state via this.props.location.state

class Playlist extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // If user navigates directly to "/playlist" state object
      // is undefined, so use a guard to protect against "access
      // ... of undefined..." errors. Also provide a default/fallback
      // value, i.e. the empty string ''.
      year: (props.location.state && props.location.state.year) || '';
    };
    this.goingBack = this.goingBack.bind(this);
  }

  goingBack() {
    console.log(this.state.year); // <--- Update to this.state.year!!
    this.props.history.push("/");
  }

  render() {
    return (
      <div className="Playlist">
        <h1> Playlist </h1>
        <div>
          <button onClick={this.goingBack}> Go back </button>
        </div>

      </div>
    );
  }
}

export default Playlist;