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">
        .map((product, ind) =>
             <div key={ind}>
                       {Object.values(product.products).map(name => <li onClick={this.props.handleClickedProduct}>{name[0]}</li>)}

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

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

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.


React mapping an array