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

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!