Tilojen välittäminen lapsikomponentteihin Reactissa

Oletetaan, että meillä on tuotetaulukko:

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

Oletetaan, että tämä taulukko sijaitsee komponentissa Products. Tallennetaan nämä tuotteet komponentin tilaan:

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

Kierretään nyt tuotteet silmukalla ja tulostetaan ne johonkin rakenteeseen:

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

Kuten näette, map-silmukan sisältö on melko monimutkainen, erityisesti jos tuotteen rakenne kasvaa tulevaisuudessa. Tällainen monimutkaisuus vaikeuttaa koodin lukemista, ymmärtämistä ja ylläpitoa.

Olisi parempi siirtää tuotteen näyttämisestä vastaava koodi omaan komponenttiin. Nimetään se Product. Tässä on komponenttimme koodi:

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

Käytetään nyt komponentin Products sisällä map-silmukassa lapsikomponentteja 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>;
}

Kuten näette, silmukan koodi on nyt yksinkertaistunut ja siitä on tullut helpommin ymmärrettävä. Lisäksi tuotteen näyttämisestä vastaa nyt erillinen komponentti, jossa voimme tehdä ja myöhemmin muokata tuotteiden rakennetta.

Teknisesti ottaen käy niin, että vanhempakomponentilla on tila, jossa on dataa, ja lapsikomponentit saavat nämä tiedot propseina ja näyttävät ne haluamallamme tavalla.

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},
];