I React er props (forkortelse for properties) en kraftig mekanisme for å tilpasse og overføre data fra en foreldreaktør til en barnekomponent. Denne funksjonen gjør det mulig å lage gjenbrukbare og fleksible komponenter i appen.

Overføring av props

Tenk deg at vi bygger en nettbutikk.

I dette tilfellet har vi en hovedkomponent kalt App, og vi ønsker å vise produktinformasjon ved hjelp av en Product-komponent. Vi kan sende produktnavn og pris som props fra App til Product.

Slik gjøres det i praksis:

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

I App-komponenten inkluderer vi Product-komponenten og sender med props: name med verdien "Green iguana" og price med verdien 579.

Motta og bruke props

Nå ser vi på Product-komponenten, som mottar disse props:

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

I Product-komponenten definerer vi den til å akseptere ett argument kalt props. Inne i komponenten kan vi få tilgang til verdiene til disse props ved å bruke punktum (.)-notasjon etterfulgt av egenskapsnavnet (f.eks. props.name og props.price).

Praktisk bruk

Med denne tilnærmingen har vi laget en Product-komponent som kan gjenbrukes med forskjellig produktinformasjon flere ganger. Vi kan enkelt tilpasse tekstinnholdet i hver Product-komponent ved å sende inn ulike props.

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

Nå har vi fleksibilitet til å vise ulike produktdetaljer ved å bruke samme Product-komponent.

Full App-kode: