React mapping an array

Question

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

Please check this out reactjs.org/docs/lists-and-keys.html

Liam
– Liam

2018-01-20 23:29:40 +00:00
Commented Jan 20, 2018 at 23:29 — Liam
– Liam, Commented Jan 20, 2018 at 23:29

Davi DeBarros · Accepted Answer · 2018-01-21 01:01:54Z

1

class Example extends React.Component {
  products = [
  	{
      id: 1,
      category: "Milk & meat",
      products: {
        product1: ["Name", "Recipe", "Photo"]
        }
  	},
    {
      id: 2,
      category: "Milk & bread",
      products: {
        product1: ["Name", "Recipe", "Photo"]
        }
  }
  ]
  
  state = {
  	clickedProduct: null
  }
  
	handleClick = (product) => (e) => {
		this.props.onClick(product)
  }
  
  render() {
    return (
    	<div className="box list">
        {this.products.map((product, ind) =>
             <div key={ind}>
                 <h2>{product.category}</h2>
                       <ul>
                         {Object.values(product.products)
                          .map(pr => <li onClick={this.handleClick(pr)}>{pr[0]}</li>)}
                       </ul>
             </div>)
             }
       </div>
    )
  }
}

class Handler extends React.Component {
	handler = (e) => {
  	console.log(e)
  }
  
  render () {
  	return <Example onClick={this.handler}/>
  } 
}

ReactDOM.render(
  <Handler />,
  document.getElementById('container')
);

Change handleClickedProduct to be

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

and inside your map you can just do this.handleClickedProduct(product.products) and use it inside the handleClickedProduct function.

edited Jan 21, 2018 at 1:01

answered Jan 20, 2018 at 23:33

Davi DeBarros

3681 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jakub Matwiejew Over a year ago

Thanks, but can you help me bit more with using it in map and then in the function?

Davi DeBarros Over a year ago

The important thing is that handleClickedProduct can be passed whatever you want so you can just pass the product.products.

Jakub Matwiejew Over a year ago

I think I know what you mean. But handleClickedProduct is in a different component than the map.

Jakub Matwiejew Over a year ago

I recived: function (e) { // this.setState({ // clickedProduct: e.target.innerHTML, // }); console.log(name); }

Davi DeBarros Over a year ago

im not sure how you are trying to call it, it would really help if you post some more code. I update the code snippet to add another component that passes the handleClicked

Collectives™ on Stack Overflow

React mapping an array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related