Подаване на състояния към дъщерни компоненти в React

Да предположим, че имаме масив с продукти:

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

Да предположим, че този масив се намира в компонента Products. Запишем тези продукти в състоянието на компонента:

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

Сега нека да обходим продуктите в цикъл и да ги изведем в някакъв вид HTML:

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

Както виждате, съдържанието на нашия цикъл map е достатъчно сложно, особено ако HTML-а на продукта се разрасне в бъдеще. Такава сложност затруднява четенето, разбирането и поддръжката на кода.

Ще е по-добре да изнесем кода, отговарящ за показването на продукта в отделен компонент. Ще го наречем Product. Ето кода на нашия компонент:

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

Сега нека вътре в компонента Products в цикъла map да използваме дъщерни компоненти 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>;
}

Както виждате, сега кодът на цикъла се опрости и стана по-разбираем. Освен това, сега за показването на продукта отговаря отделен компонент, в който можем да правим, а след това да редактираме HTML-а на продуктите.

Технически се получава, че родителският компонент има състояние с данни, а дъщерните компоненти получават тези данни под формата на props и ги показват по начин, който ни е необходим.

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