Wat zijn Props?

Props (properties) zijn data die je doorgeeft van een parent component naar een child component. Hiermee maak je componenten herbruikbaar!

Denk aan functies:

Props zijn net als parameters bij functies. Je geeft data mee en het component gebruikt die data.

Een component zonder props is statisch - het toont altijd hetzelfde. Met props wordt het dynamisch!

Props Gebruiken

Basis Voorbeeld

// src/components/Car.jsx
const Car = ({ brand }) => {
  return <h1>Hi, I am a {brand}!</h1>;
};

export default Car;

Nu geven we de brand prop mee:

// src/App.jsx
import Car from './components/Car';

function App() {
  return (
    <div>
      <Car brand="Ford" />
    </div>
  );
}

export default App;

Resultaat: Hi, I am a Ford!

Hoe werkt het?

Tussen {} (accolades) in JSX kan je JavaScript expressies gebruiken. {brand} wordt vervangen door de waarde die je meegeeft!

Meerdere Props

Je kunt meerdere props meegeven:

// src/components/Car.jsx
const Car = ({ brand, color, year }) => {
  return (
    <div>
      <h1>Hi, I am a {brand}!</h1>
      <p>Color: {color}</p>
      <p>Year: {year}</p>
    </div>
  );
};

export default Car;
// src/App.jsx
<Car brand="Ford" color="blue" year={2020} />

Let op: Strings gebruik je met quotes: "Ford"
Numbers gebruik je met accolades: {2020}

Props met Arrays en Objects

const Person = ({ name, hobbies }) => {
  return (
    <div>
      <h2>{name}</h2>
      <ul>
        {hobbies.map(hobby => <li key={hobby}>{hobby}</li>)}
      </ul>
    </div>
  );
};
// Gebruik:
<Person
  name="Jan"
  hobbies={["voetbal", "gamen", "koken"]}
/>

Zie het in actie — één component, drie keer gebruikt

Je schrijft StudentCard één keer. Daarna kun je hem zo vaak gebruiken als je wilt — telkens met andere props. Pas hieronder de props van elke kaart aan en kijk wat er gebeurt.

De Component Definitie (1 keer schrijven)
const StudentCard = ({ name, role, avatar }) => { return ( <div className="card"> <div className="avatar">{avatar}</div> <h3>{name}</h3> <p>{role}</p> </div> ); };
Drie keer gebruikt — pas de props aan ↓
Pas de Component aan → alle kaarten veranderen mee

Klik op een style-knop. Omdat er maar één definitie van StudentCard is, krijgen alle instances meteen de nieuwe styling.

De twee gezichten van props:

  1. Verschillende data per instance. Anna, Bram en Chloé hebben elk een eigen naam, rol en avatar — maar gebruiken dezelfde component.
  2. Eén styling voor alle instances. Verander de component één keer (klik op een style-knop) en alle drie de kaarten krijgen tegelijk de nieuwe look.

Dát is herbruikbaarheid. Schrijf het ontwerp één keer, gebruik het oneindig vaak met verschillende inhoud.

Destructuring

Er zijn twee manieren om props te ontvangen:

Zonder Destructuring

const Car = (props) => {
  return <h1>Hi, I am a {props.brand}!</h1>;
};

Met Destructuring (beter!)

const Car = ({ brand }) => {
  return <h1>Hi, I am a {brand}!</h1>;
};

Best Practice: Gebruik altijd destructuring - het is korter en duidelijker!

Children Prop

De children prop is speciaal. Het bevat alles wat je tussen de opening en closing tag zet:

const Card = ({ children }) => {
  return (
    <div className="card">
      {children}
    </div>
  );
};
// Gebruik:
<Card>
  <h2>Titel</h2>
  <p>Dit is de inhoud van de card</p>
</Card>

Wanneer children gebruiken?

Perfect voor wrapper components zoals Cards, Modals, Buttons die andere content bevatten!

Belangrijke Regels

  • Props zijn read-only - je kunt ze niet aanpassen in het child component
  • Props gaan van parent naar child - nooit andersom
  • Gebruik destructuring - maakt code leesbaarder
  • Strings met quotes, rest met accolades

Veelgemaakte Fouten

Fout - Props aanpassen:

const Car = ({ brand }) => {
  brand = "Toyota"; // Niet doen!
  return <h1>{brand}</h1>;
};

Goed - Props zijn read-only:

const Car = ({ brand }) => {
  // Gebruik props zonder ze aan te passen
  return <h1>{brand}</h1>;
};

Fout - Number zonder accolades:

<Car year="2020" />  // Dit is een string!

Goed - Number met accolades:

<Car year={2020} />  // Dit is een number!