Iterating and passing elements through an attribute to a component?

Question

React

It is necessary to iterate over the array returning the values ​​in jsx format and then passing them to the attribute of the component. Working example:

<ul>
  {this.props.productsInBasket.map((product) => <li key={product.name}>{product.name}</li>)}
</ul>

Required view:

wrappers.map(function(el){
  return <Wrapper element={el} childern={el.require.map((child) => <li>{child.name}</li>)}/>
})

Answer 1

wrappers.map(function(el){
  	return (
  		<Wrapper element={el}>
      {el.require.map((child, key) => {
        return <li key={key}>{child.name}</li>
      })}
    <Wrapper/>
  );
})