States

Liens_Web:

React applique une règle stricte :

« Tout composant React doit agir comme une fonction pure vis-a-vis de ses props ».

Les fonctions composants ne pouvant manipuler que des props, on les utilisent lorsque notre composant ne modifie pas sont état. On parle de Composant Stateless.

Lorsqu’un composant doit modifier son état, on utilise une classe (ou des Hooks dans le cas d’une fonction).

 1 const famille = {
 2     membre1: {
 3         nom: 'Pierre,
 4         age: 42,
 5         type: 'humain'
 6     },
 7     membre2: {
 8         nom: 'Tartine'
 9         age: 8,
10         type: 'chat'
11     }
12 }
13
14 class App extends Component {
15     // 'state = { famille }' en version destructuration
16     // 'state = { famille : famille }' en version normal
17     state = { famille }
18     render() {
19         const {titre} = this.props
20         const { famille } = this.state
21         return(
22             <div>
23                 <h1>{titre}</h1>
24                 <Membre nom={famille.membre1.nom} />
25                 <Membre nom={famille.membre2.nom} />
26             </div>
27         )
28     }
29 }