In React zijn props (afkorting van properties) een krachtig mechanisme voor het aanpassen en doorgeven van gegevens van een ouder- naar een kindcomponent. Deze functionaliteit maakt het mogelijk om herbruikbare en flexibele componenten binnen de applicatie te creëren.

Props doorgeven

Stel je voor dat we een online winkel bouwen.

In dit scenario hebben we een hoofdcomponent genaamd App, en willen we productinformatie weergeven met behulp van een Product-component. We kunnen de productnaam en prijs als props van App naar Product doorgeven.

Zo wordt het in de praktijk toegepast:

// Parent Component (`App`)
const App = () => (
  <>
    <h1>Online Store</h1>
    <Product name="Green iguana" price={579} />
  </>
);

In de App-component voegen we de Product-component toe en geven we de props door: name met de waarde "Green iguana" en price met de waarde 579.

Props ontvangen en gebruiken

Hier volgt de Product-component, die deze props ontvangt:

// Child Component (`Product`)
const Product = (props) => (
  <>
    <p>Product name: {props.name}</p>
    <p>Price: ${props.price}</p>
  </>
);

In de Product-component definiëren we een enkel argument genaamd props. Binnen de component zijn de waarden van deze props toegankelijk via de punt (.)-notatie gevolgd door de propertynaam (bijvoorbeeld props.name en props.price).

Praktisch gebruik

Met deze aanpak is een Product-component gemaakt die herbruikbaar is met verschillende productinformatie. De tekstinhoud van elke Product-component is eenvoudig aan te passen door andere props te gebruiken.

<Product name="Yellow cheetah" price={1099} />
<Product name="Panda" price={449} />

Hierdoor ontstaat flexibiliteit om verschillende productdetails weer te geven met dezelfde Product-component.

Volledige app-code: