Passing state between components

Question

I wrote a component with a state chosenGenre and inside it, there is a function that changes the state according to the clicked button.

I would like to take the updated state (which is string) and use it in another component.

This is the component in which the state is declared:

import React, { Component } from 'react';
import Genre from './Genre';
import './GenreSelectPage.css';
import Blues from '../Blues.png';
import Classical from '../Classical.png'; 
import Country from '../Country.png';

export default class GenreSelectPage extends Component{

    state = {
        chosenGenre: ""
    }

    handleClick = (genreName) => {
        this.setState({ chosenGenre: genreName });
    }

    render() {
        return(
        <div className = "GenreSelectPage">
        <h3>Select your desired Kollab Room Genre</h3>
        <Genre genrePicture= {Blues} genreClicked = {()=>this.handleClick("Blues")}/>
        <Genre genrePicture= {Classical} genreClicked = {()=>this.handleClick("Classical")}/>
        <Genre genrePicture= {Country} genreClicked = {()=>this.handleClick("Country")}/>
        </div>
        ) 
     }
}

And this is the new component for which I want to use the chosenGenre state from GenreSelectPage component :

import React, { Component } from 'react';
import GenreSelectPage from './GenreSelectPage';

export default class InRoomPage extends Component {

    render() {
        return(
            <div className = "InRoomPage">
                <p>Welcome to {GenreSelectPage.state.chosenGenre} page</p>
            </div>
        )
    }
}

What should I change inside the:

<p>Welcome to {GenreSelectPage.state.chosenGenre} room !</p>

So it will work?

Answer 1

Common parent: ( You can lift your state up one level )

If these components have a common parent, then you need to move this state one step up into the common parent component and pass the handler to update the state into GenreSelectPage and pass the state has props into InRoomPage.

Have no common parent: ( Can use Redux )

You need to use Redux, where you state will be maintained in one central store and you can connect to this store from any component from any part of the component tree and get the state into its props.

usage : https://redux.js.org/basics/usage-with-react

Moving components under the same parent:

You can create a new component say componentParent (Use name according to your app ), store your state in this component.

import React, { Component } from 'react';
import GenreSelectPage from './GenreSelectPage';
import InRoomPage from './InRoomPage';

export default class componentParent extends Component {

    state = {
      chosenGenre: ""
    }

    handleClick = (genreName) => {
      this.setState({ chosenGenre: genreName });
    }

    render() {
      return(
        <div className = "InRoomPage">
          <GenreSelectPage clickHandler={this.handleClick}></GenreSelectPage>
          <InRoomPage chosenGenre={this.state.chosenGenre}></InRoomPage>
        </div>
      )
    }
}

also please check Context API