Överföra Data med Props

Komponenter behöver ofta visa olika data beroende på var de används. I React skickas data in i komponenter med hjälp av props. Props är indata till en komponent. De gör det möjligt att skicka data från en föräldrakomponent till en barnkomponent och styra vad komponenten visar.

Istället för att hårdkoda värden inuti en komponent, gör props komponenter återanvändbara. Samma komponent kan användas flera gånger med olika data, vilket ger olika UI-resultat.

Nedan följer ett enkelt exempel på hur man skickar data till en komponent med props:

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

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

I detta exempel skickar App-komponenten värdet "Olivia" till Greeting-komponenten med en prop som heter name. Greeting-komponenten tar emot denna data och visar den i användargränssnittet.