Componenten moeten vaak verschillende gegevens weergeven, afhankelijk van waar ze worden gebruikt. In React worden gegevens aan componenten doorgegeven met behulp van props. Props zijn invoerwaarden voor een component. Ze maken het mogelijk om gegevens van een oudercomponent naar een kindcomponent te sturen en bepalen wat de component weergeeft.

In plaats van waarden in een component vast te leggen, maken props componenten herbruikbaar. Dezelfde component kan meerdere keren met verschillende gegevens worden gebruikt, wat resulteert in verschillende UI-uitvoer.

Hieronder staat een eenvoudig voorbeeld van het doorgeven van gegevens aan een component met props:

function Greeting(props) {
  return <h2>Hello, {props.name}</h2>;
}

function App() {
  return <Greeting name="Olivia" />;
}

In dit voorbeeld geeft de App-component de waarde "Olivia" door aan de Greeting-component via een prop genaamd name. De Greeting-component ontvangt deze gegevens en toont ze in de gebruikersinterface.