Le “state” est l’endroit où vous stockez les propriétés de l’objet qui peuvent être modifiées au cours du temps. La modification de l’état entraîne souvent un rendu de l’interface utilisateur. Voici un exemple de la façon dont vous pouvez gérer le “state” dans une application React :
1. Initialiser le state : Tout d’abord, vous devez initialiser le state de votre composant. Dans une classe, vous pouvez le faire dans le constructeur. Avec les fonctions composantes, vous utilisez l’hook useState.
Dans une classe :
```
class MonComponent extends React.Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
}
…
}
```
Dans une fonction composante :
```
function MonComponent() {
const [counter, setCounter] = React.useState(0);
…
}
```
1. Mettre à jour le state : React dispose d’une fonction intégrée appelée setState pour mettre à jour le state dans une classe. Pour les fonctions composantes, vous utilisez la fonction de mise à jour retournée par useState.
Dans une classe :
```
this.setState({ counter: this.state.counter + 1 });
```
Dans une fonction composante :
```
setCounter(counter + 1);
```
1. Accéder à l’état : Vous pouvez accéder à l’état actuel de votre composant à tout moment en utilisant `this.state` dans une classe. Dans une fonction composante, vous utilisez simplement la variable d’état.
Dans une classe :
```
console.log(this.state.counter);
```
Dans une fonction composante :
```
console.log(counter);
```
C’est une introduction de base à la gestion de l’état dans React. Il y a d’autres concepts plus avancés comme l’état global (avec Redux par exemple), les effets secondaires de la mise à jour de l’état, etc.
