Overføring av Data med Props

Komponenter må ofte vise forskjellig data avhengig av hvor de brukes. I React sendes data inn i komponenter ved hjelp av props. Props er input til en komponent. De gjør det mulig å sende data fra en foreldreakomponent til en barnekomponent og kontrollere hva komponenten viser.

I stedet for å hardkode verdier inne i en komponent, gjør props komponenter gjenbrukbare. Den samme komponenten kan brukes flere ganger med forskjellig data, og gir ulikt UI-resultat.

Nedenfor er et enkelt eksempel på å sende data til en komponent ved hjelp av props:

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

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

I dette eksempelet sender App-komponenten verdien "Olivia" til Greeting-komponenten ved hjelp av en prop kalt name. Greeting-komponenten mottar denne dataen og viser den i brukergrensesnittet.