React mapping an array

I’ve a object:

{
  "products": [
    {
      "id": 1,
      "category": "Milk & meat",
      "products": {
        "product1": ["Name", "Recipe", "Photo"]
        }
    }
}

and it’s mapped like that:

return (
    <div className="box list">
    {this.props.products
        .map((product, ind) =>
             <div key={ind}>
                 <h2>{product.category}</h2>
                       {Object.values(product.products).map(name => <li onClick={this.props.handleClickedProduct}>{name[0]}</li>)}
             </div>)}
    </div>
)

The onClick method passes the product name ([0] in array) to other component. It does it like that:

handleClickedProduct = (e) => {
    this.setState({ clickedProduct: e.target.innerHTML });
}

How cane I setState [1] and [2] from the same array?
I want to pass forward the product name and keep in state the recipe and photo.

Thanks,
Kuba

React mapping an array