How can I pass the index from javascript map function to the onclick function?

Question

I have an array of data that I'm iterating through, In the javascript map() function call I'm using the second argument that map() takes, 'index'. How would I pass index to the onClick event? I tried adding index to the list of arguments for onClick but all I can access are the events. Is there anyway I can pass the index through?

I'd like to be able to execute the commented out line 'handleImageClick(productObjects[index])'. I need to let the parent component know which productObject was clicked on by the user.

export default function SideProducts(props) { const { productObjects, handleImageClick } = props; const onClick = (e) => { e.persist() console.log(e) //handleImageClick(productObjects[index]) } console.log(productObjects) return ( <Wrapper> {productObjects.map((productObject,index) => ( <ImageWrapper key={index} src={productObject.image} onClick={(e) => onClick(e)}> </ImageWrapper> ))} </Wrapper> ) }

Hans Krohn · Accepted Answer · 2021-08-23 04:53:22Z

I am doing this without testing, but you should be able to just pass the index like this.

const onClick = (e, index) => { e.persist() console.log(e) //handleImageClick(productObjects[index]) } console.log(productObjects) return ( <Wrapper> {productObjects.map((productObject,index) => ( <ImageWrapper key={index} src={productObject.image} onClick={(e) => onClick(e, index)}> </ImageWrapper> ))} </Wrapper> ) }

Amruth · Accepted Answer · 2021-08-23 05:11:06Z

This way. please go through this blog to learn more about passing arguments with onClick

export default function SideProducts(props) { const { productObjects, handleImageClick } = props; const onClick = (e, index) => { e.persist() console.log(e, index) //handleImageClick(productObjects[index]) } console.log(productObjects) return ( <Wrapper> {productObjects.map((productObject,index) => ( <ImageWrapper key={index} src={productObject.image} onClick={(e) => onClick(e, index)}> </ImageWrapper> ))} </Wrapper> ) }

Sifat Haque · Accepted Answer · 2021-08-23 04:55:26Z

First you need to pass the index as argument. onClick={(e) => onClick(e, index)}
Then receive that index as functional parameter.

const onClick = (e, index) => { e.persist() console.log(e, index) //handleImageClick(productObjects[index]) }

user16730065 · Accepted Answer · 2021-08-23 04:55:15Z

Just add it as a parameter to yow onClick

 <ImageWrapper key={index} src={productObject.image} onClick={(e) => onClick(e,productObject.addThePropHere)}> </ImageWrapper>

Then in your function just add it as well

const onClick = (e,prop)=> ….code

Justin Dang · Accepted Answer · 2021-08-23 05:08:32Z

You can use a higher-order function here to pass params as you want:

const handleWithIndex= index => { return (event) => { e.persist() //handleImageClick(productObjects[index]) } } return ( <Wrapper> {productObjects.map((productObject,index) => ( <ImageWrapper key={index} src={productObject.image} onClick={handleWithIndex(index)}> </ImageWrapper> ))} </Wrapper> ) }

Collectives™ on Stack Overflow

How can I pass the index from javascript map function to the onclick function?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Linked

Related