Quelles différences entre les "props" et le "state" avec React ?

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} />