Props... Propriétés... State... État... Au début, c'est toujours un peu... étrange ! Pour éviter d'avoir le moindre doute, faisons un petit récapitulatif des différences entrre les props et le state avec React.
Les Props (propriétés / attributs JSX)
Les Props vont nous permettre de passer des fonctions / méthodes et des valeurs à des composants. Nous les utilisons principalement pour passer des informations.
<MonSousComposant prenom=‘Eva’ nom=‘Dupont’ />
Le state (état)
Le state nous permet de gérer des données pour qu'on puisse ensuite les utiliser dans notre projet. C'est comme si nous donnions un cerveau à notre composant : il peut ensuite modifier le state.
Nous verrons dans la suite de la formation que nous pouvons également avoir plusieurs states, vous allez voir, c'est véritablement très utile !
state = {
utilisateurs: {
utilisateurA: {
prenom: ‘Eva’,
nom: ‘Dupont'
}
}
}
Le state et les Props ?
Nous pouvons ainsi gérer les données avec le state, et envoyer ces données à nos composants grâce aux props.
state = {
utilisateurs: {
utilisateurA: {
prenom: ‘Eva’,
nom: ‘Dupont'
}
}
}
<MonSousComposant
prenom={this.state.utilisateurs[0].prenom}
nom={this.state.utilisateurs[0].nom} />
