Remonter l'état | smnarnold

Faire remonter l'état, ou en anglais "lifting state up", consiste à définir une variable d'état dans un composant parent et à la passer en paramètres à un composant enfant avec la fonction permettant de la modifier.

Le fait de déplacer la variable dans un composant parent offre différents avantages. Notamment d'y avoir accès à ce niveau pour l'afficher ou encore la passer à un autre composant.

Affichage dans le parent

Normalement, un composant enfant (Child) définit ses propres variables d'état (text) comme ceci:

function Child() {
  const [text, setText] = React.useState("Demo");
  return <input 
           type="text" 
           value={text} 
           onChange={event => setText(event.target.value)} />
}

La variable text n'existe que dans le contexte de Child. Il est donc impossible d'y faire référence dans un autre composant.

Parcontre, il est possible de définir la variable text dans un composant parent (Parent) et de la passer en paramètre au composant enfant (Child) avec la fonction permettant de changer sa valeur:

function Child({text, onTextChange}) {
  return <input type="text" value={text} onChange={onTextChange} />
}

function Parent() {
  const [text, setText] = React.useState("Demo");
  return (
    <>
      {text}
      <Child text={text} onTextChange={event => setText(event.target.value)} />
    </>
  )
}

Ainsi, les composants enfant et parent ont accès à la variable.

Exemple concret

Modifiez le pointage de chacun des joueurs en cliquant dessus et en entrant une nouvelle valeur. Remarquez comment la pointage total, affiché au centre, change en fonction de ces valeurs:

CodePen | smnarnold 👀

Chaque joueur est un composant enfant (Player). Cependant, puisque leurs variables de pointage (score) sont définies dans leur parent (App), le parent a accès à ces valeurs et est en mesure de les additionner afin d'afficher le pointage total.

Remonter l'état