Wat zijn props in de context van React?

props (afgeleid van het Engelse woord properties) in React is een object dat de gegevens bevat die worden doorgegeven van een oudercomponent naar een kindcomponent. Ze zijn binnen het kindcomponent alleen-lezen toegankelijk en vormen het belangrijkste mechanisme om informatie naar beneden door de componentenboom te sturen.

Belangrijkste kenmerken van props:

• Gegevensoverdracht: Ze worden gebruikt om gegevens, configuraties en callbacks van ouder naar kind door te geven.
• Onveranderlijkheid: Binnen het kindcomponent kunnen props niet worden gewijzigd. Elke wijziging moet afkomstig zijn van het oudercomponent dat nieuwe props doorgeeft.
• Object: props worden altijd als een object doorgegeven. Elke doorgegeven eigenschap wordt een sleutel in dit object.
• Toegang: In functionele componenten worden props als eerste argument van de functie doorgegeven. In klassecomponenten zijn ze toegankelijk via this.props.

Voorbeeld van het doorgeven en gebruiken van props:

// Oudercomponent
function ParentComponent() {
  const greeting = "Hallo";
  return <ChildComponent message={greeting} />;
}

// Kindcomponent
function ChildComponent(props) {
  return <p>{props.message}, wereld!</p>;
}