Les props

Les props sont un mécanisme à utiliser lorsque vous souhaitez transmettre une information à un composant. Par exemple si vous voulez que votre composant Hello dise bonjour à la bonne personne (pour moi "Hello Mari").

Hello.jsx

const Hello = (props) => {
  return (
    <article className="heading" >
        <h1>Hello {props.firstName}</h1> <!-- Je récupère firstName -->
        <p>Comment ça va ?</p>
    </article>
  )
}

export default Hello;

App.jsx

import Hello from './Hello.jsx';

function App() {

  return (
    <Hello firstName="Mari"/><!-- J'envoie firstName -->
  )
}

Les props sont en lecture seule, cela veut dire qu'un composant ne peut pas modifier ses props, cette restriction est en place pour imposer une certaine rigueur dans le flux des informations au sein des composants React.

Transmettre des props simples

Hello.jsx

const Hello = (props) => {
  return (
    <article className="heading" >
        {/*Je récupère firstName et lastName */}
        <h1>Hello {props.firstName} {props.lastName}</h1>
        <p>Comment ça va ?</p>
    </article>
  )
}

export default Hello;

App.jsx

import Hello from './Hello.jsx';

function App() {

  return (
      {/*J'envoie firstName et lastName */}
    <Hello firstName="Mari" lastName="Doucet"/>
  )
}

Transmettre les props dans un objet

Hello.jsx

const Hello = (props) => {
  return (
    <article className="heading" >
        {/*Je récupère firstName et lastName depuis l'objet */}
        <h1>Hello {props.identity.firstName} {props.identity.lastName}</h1>
        <p>Comment ça va ?</p>
    </article>
  )
}

export default Hello;

App.jsx

import Hello from './Hello.jsx';

function App() {

  return (
      {/*J'envoie firstName et lastName dans un objet*/}
    <Hello identity={{firstName : "Mari", lastName: "Doucet"}}/>
  )
}

Transmettre les props dans une boucle

Hello.jsx

const Hello = (props) => {
  return (
    <article className="heading" >
        {/*Je récupère firstName et lastName depuis l'objet */}
        <h1>Hello {props.identity.firstName} {props.identity.lastName}</h1>
        <p>Comment ça va ?</p>
    </article>
  )
}

export default Hello;

App.jsx

import Hello from './Hello.jsx';

function App() {
    let users = [
        {
            firstName : "Mari",
            lastName : "Doucet"
        },
        {
            firstName: "Hugues",
            lastName: "Froger"
        }
    ];
  return (
      <ul>
          {/* Je fais une boucle sur le tableau users */}
          {/* et j'envoie chaque objet du tableau en props */}
          {users.map((user, i) => <li key={i}><Hello identity={user} /></li>)}
      </ul>
  )
}

28 January 2026