Lifting up state in React

Question

say i have this React Class. This is NOT my main component that I'm rendering. how can i pass the state i set in here UPWARDS to the parent component.

class Player extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          playerOneName: ''
        }
        this.selectPlayerOne = this.selectPlayerOne.bind(this);
      }

      selectPlayerOne(e, data) {
        this.setState({playerOneName: data.value})
      }

      render() {
        let players = [];
        this.props.players.map((player) => {
          players.push({text: player.name, value: player.name})
        })

        return (
          <div className="playersContainer">
            <div className="players">
              <Dropdown onChange={this.selectPlayerOne} placeholder='Select Player One' fluid selection options={players} />
            </div>
          </div>
        )
      }
    }

when I say parent component i mean the class that is going to display player like so:

<Player />

I.e. how can I make this.state.playerOneName available to the parent?

React is unidirectional by nature. You cannot or I should say you should not pass state from chil to parent. For this your must make use of redux or flux. — Shubham Jain, Sep 29 '17 at 08:25
@TheWalrus This part `onChange={this.selectPlayerOne}` is what you need to change, you should pass the on change callback as a property from the parent. — Alexander Derck, Sep 29 '17 at 09:00
This has better insights https://facebook.github.io/react/docs/lifting-state-up.html — Shubham Jain, Sep 29 '17 at 09:14

score 1 · Answer 1 · answered Sep 29 '17 at 09:12

Hey so the point here is that you are basically passing in, from your parent component into your child component, a prop which is a function.

In parent:

handler(newValue){ 
    this.setState({key: newValue}) 
}
render() {
    return(
        <Child propName={handler.bind(this)}>
    )
}

When a change takes place in your child component, you call the function and pass in the new value as an input. This way you are calling the function in your child component, and making a change to the state of the parent component.

In your case you want to, instead of setting the state of playerOneName, pass in a function from the parent of this class and do something like this.props.functionFromParent(playerOneName) in your 'selectPlayOne' function.

It is true that the flux pattern is unidirectional, however when you're dealing with smart and dumb components you will see that data is passed from a dumb component to a smart component in this way. It is perfectly acceptable React form!

score 0 · Answer 2 · answered Sep 29 '17 at 08:51

0

"Lifting state up" for React means that you should replace data from your child component to parent component state and pass data for presentation to child component by props.

answered Sep 29 '17 at 08:51

Vlad Dekhanov

1,066
1
13
27

score 0 · Answer 3 · answered Sep 29 '17 at 12:02

You can do something like this to achieve your goal. Create a parent component which hold playerOneName as its state. Pass it as a prop to child component and with that also a function that changes the playerOneName whenever it is changed in the child component.

class Parent extends Component {
  constructor(props){
     this.state = {
      playerOneName: ''
     }
  }
  render() {
      return(
          <Child 
              playerOneName={this.state.playerOneName}
              onPlayerOneNameChange={(playerOneName) => this.setState({playerOneName})}
         />
      );
  }
}

Use this function like this in child component to change the name of playerOneName in Parent component, like this your child component is only displaying the value of the playerOneName all the changes are done in Parent component only.

class Child = props => {
  const { playerOneName, onPlayerOneNameChange } = props;
  return (
     <TextInput 
       value={playerOneName}
       onChangeText={(playerOneName) => onPlayerOneNameChange(playerOneName)}
     />
  );
}

By this you can use updated playerOneName in your Parent component whenever you like by using this.state.playerOneName

Lifting up state in React

3 Answers3

Linked

Related