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(
        
        Select your desired Kollab Room Genre
        this.handleClick("Blues")}/>
        this.handleClick("Classical")}/>
        this.handleClick("Country")}/>
        
        ) 
     }
}

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(
            
                Welcome to {GenreSelectPage.state.chosenGenre} page
            
        )
    }
}

What should I change inside the:

Welcome to {GenreSelectPage.state.chosenGenre} room !

So it will work?

user_1635825 · Answer

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(
        
          
          
        
      )
    }
}

also please check Context API

user_10470860 · Answer

As others have mentioned, the common way to share state between components is to use Redux, MobX is another alternative.

Here's a basic example of a Redux application. Two components, one which writes a value to the Redux store, and the other which reads a value from the Redux store.

The key parts of setting up Redux are:

- This wraps your entire app and supplies the store, also known as a reducer
reducer - This is where you set an initial state, and return an updated version of the state based on actions
actions - Actions are just objects with values you can read from to update and return a new state
connect - This function connects your component to redux, its first two arguments are mapStateToProps, and mapDispatchToProps
mapStateToProps - This parameter is a function that allows you to read from the state (redux store), and it will put the values into this.props
mapDispatchToProps - Dispatch actions to update the store is done from here

Your reducer, actions, and selectors are normally in separate files, so they can be shared between components easily.

The components below would be in separate files as well, and you'd export default the connect portion of each.

Demo

const { Component } = React;
const { applyMiddleware, createStore } = Redux;
const { connect, Provider } = ReactRedux;


/*********************/
/** GenreSelectPage **/
/*********************/
class GenreSelectPage extends Component {
  constructor(props) {
    super(props);
    this.selectGenre = this.selectGenre.bind(this);
  }
  selectGenre(e) {
    const genre = e.target.value;
    this.props.selectGenre(genre);
  }
  render() {
    return (
      
        GenreSelectPage Component
        
      
    )
  }
}

// Write to store
const mapDispatchToProps = (dispatch) => ({ selectGenre: (genre) => dispatch({type: 'SELECT_GENRE', genre}) })

// Connect to store
const GenreSelectComponent = connect(null, mapDispatchToProps)(GenreSelectPage);


/*******************/
/**  InRoomPage   **/
/*******************/
class InRoomPage extends Component {
  render() {
    return (
      
        InRoomPage Component
        {this.props.genre}
      
    )
  }
}

// Read from store
const mapStateToProps = (state) => ({ genre: state.genre });
// Connect to store
const InRoomComponent = connect(mapStateToProps)(InRoomPage);

/*******************/
/**     REDUX     **/
/*******************/
const INITIAL_STATE = {
  genre: null
}
const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'SELECT_GENRE':
      return {
        ...state,
        genre: action.genre
      }
    default:
      return state;
  }
};
const store = createStore(reducer);

// Provider (from Redux) wraps around your entire app
ReactDOM.render(
  
    
    
  ,
  document.getElementById('root')
);

Ramesh_30594 · Answer

You can try any of the below things

a. Move the state to the common parent component of GenreSelectPage and InRoomPage. Pass the handleGenereChange method to the GenreSelectPage as props and set the state in the parentComponent. Send the state value as props to InRoomPage. This is called lifting the state up. More details at https://reactjs.org/docs/lifting-state-up.html

b. Use Redux. More info available on https://almerosteyn.com/2016/08/redux-explained-again

Passing state between components

3 Answers

Demo