Overføring av tilstander til underkomponenter i React

La oss si at vi har en matrise med produkter:

jsxconst initProds = [
  {id: id(), name: 'product1', cost: 100},
  {id: id(), name: 'product2', cost: 200},
  {id: id(), name: 'product3', cost: 300},
];

La oss si at denne matrisen er plassert i komponenten Products. La oss skrive disse produktene til tilstanden til komponenten:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
}

La oss nå gå gjennom produktene med en løkke og vise dem i en eller annen markup:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <div key={prod.id}>
      navn: <span>{prod.name}</span>,
      pris: <span>{prod.cost}</span>
    </div>;
  });
  
  return <div>
    {items}
  </div>;
}

Som du ser, er innholdet i vår map-løkke ganske komplekst, spesielt hvis markupen for produktet vokser i fremtiden. Slik kompleksitet vanskeliggjør lesing, forståelse og vedlikehold av koden.

Det ville være bedre å flytte koden som viser produktet til en egen komponent. La oss kalle den Product. Her er koden for vår komponent:

jsxfunction Product({ name, cost }) {
  return <div>
    navn: <span>{name}</span>,
    pris: <span>{cost}</span>
  </div>;
}

La oss nå inne i komponenten Products i map-løkken bruke underkomponenter Product:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <Product
      key ={prod.id}
      name={prod.name}
      cost={prod.cost}
    />;
  });
  
  return <div>
    {items}
  </div>;
}

Som du ser, har koden for løkken blitt forenklet og blitt mer forståelig. I tillegg er det nå en egen komponent som er ansvarlig for visning av produktet, der vi kan lage og deretter redigere markupen for produktene.

Teknisk sett har vi at foreldrekomponenten har en tilstand med data, mens underkomponentene mottar disse data som props og viser dem på den måten vi ønsker.

jsxconst initUsers = [
  {id: id(), name: 'user1', surname: 'surn1', age: 30},
  {id: id(), name: 'user2', surname: 'surn2', age: 31},
  {id: id(), name: 'user3', surname: 'surn3', age: 32},
];