Passing states to child components in React

Let us have an array with products:

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

Let this array be located in the component Products. Let's write these products to the component state:

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

Now let's loop through the products and display them in some layout:

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

As you can see, the contents of our map cycle are quite complex, especially if the product layout grows in the future. Such complexity makes the code difficult to read, understand, and maintain.

It would be better to move the code responsible for displaying the product to a separate component. Let's call it Product. Here is the code for our component:

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

Now let's use the child components Products inside the map component in the Products cycle:

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

As you can see, the cycle code has now been simplified and made more understandable. In addition, a separate component is now responsible for displaying the product, in which we can make and then edit the layout of products.

Technically, we have a parent component that has a state with data, and child components receive this data in the form of props and display it in the way we need.

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