Change parent component props/state from child

AnthonyDa

I'm currently learning REACT to create a web app. In this app, I have a list of selectedCharacters in the parent's state and in each child component I have an input for the player name. I'm struggling to update the player name in the parent's state.

class Game extends React.Component {
  state = {
    selectedCharacters: [{"name":"Loup Garou","imgName":"base_loup.png","uniqueKey":"loup","playerName":""},{"uniqueKey":"voyante","imgName":"base_voyante.png","name":"Voyante","maxInGame":1,"left":1}]
  };
  changePlayerName = (char, newName) => {
    char.playerName = newName;
  };
  render() {
    const { selectedCharacters } = this.state;
    return(<CharactersSelection selectedCharacters={selectedCharacters} />);  
  }
}

const CharactersSelection = props => {
  return (
    <div className="row col-12 char-list">      
      <div className="col-md-9 col-xl-10 char-selected pad-r-10 pad-l-10">
        <div className="row char-selected-content">
          {props.selectedCharacters.map((char, i) => (
            <CharacterCardSelected key={i} imgName={char.imgName} name={char.name} playerName={char.playerName}/>
          ))}
        </div>
      </div>
    </div>
  );
};

const CharacterCardSelected = props => {
  return (
    <div className="d-flex char-card-selected" id={props.id}>
      <img alt={props.imgName} className="char-img-sm" src=require("../../public/images/" + props.imgName)}/>
      <div className="char-card-selected-txt">
        <div>
          <input
            type="text"
            className="form-control player-name"
            placeholder="Nom joueur..."
            value={props.playerName}
            onChange={e => {console.log(e)}}
          />
        </div>
      </div>
    </div>
  );
};

Help will be appreciated.

samee

What you will do is pass the changePlayerName function as a prop to CharactersSelection and from there pass it further down to CharacterCardSelected component. Now onChange of CharacterCardSelected call the method this.props.changePlayerName(name);

class Game extends React.Component {
  state = {
    selectedCharacters: [{"name":"Loup Garou","imgName":"base_loup.png","uniqueKey":"loup","playerName":""},{"uniqueKey":"voyante","imgName":"base_voyante.png","name":"Voyante","maxInGame":1,"left":1}]
  };
  changePlayerName = (char, newName) => {
    char.playerName = newName;
  };
  render() {
    const { selectedCharacters } = this.state;
    return(<CharactersSelection selectedCharacters={selectedCharacters} onChange={this.changePlayerName} />);  
  }
}

const CharactersSelection = props => {
  return (
    <div className="row col-12 char-list">      
      <div className="col-md-9 col-xl-10 char-selected pad-r-10 pad-l-10">
        <div className="row char-selected-content">
          {props.selectedCharacters.map((char, i) => (
            <CharacterCardSelected key={i} imgName={char.imgName} name={char.name} playerName={char.playerName} onChange={(newName) => {props.onChange(char,newName)}}/>
          ))}
        </div>
      </div>
    </div>
  );
};

const CharacterCardSelected = props => {
  return (
    <div className="d-flex char-card-selected" id={props.id}>
      <img alt={props.imgName} className="char-img-sm" src=require("../../public/images/" + props.imgName)}/>
      <div className="char-card-selected-txt">
        <div>
          <input
            type="text"
            className="form-control player-name"
            placeholder="Nom joueur..."
            value={props.playerName}
            onChange={e => {
              console.log(e);
              props.onChange(e.target.value)
            }}
          />
        </div>
      </div>
    </div>
  );
};

Collected from the Internet

Please contact [email protected] to delete if infringement.