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

3

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>
    )
}

answered Aug 23, 2021 at 4:53

Hans Krohn

4332 silver badges8 bronze badges

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

Comments

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

2

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>
    )
}

edited Aug 23, 2021 at 5:11

answered Aug 23, 2021 at 4:52

Amruth

5,9122 gold badges30 silver badges41 bronze badges

Comments

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

1

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])
}

answered Aug 23, 2021 at 4:55

Sifat Haque

6,1272 gold badges18 silver badges24 bronze badges

Comments

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

0

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

answered Aug 23, 2021 at 4:55

user16730065

Comments

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

0

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>
    )
}

answered Aug 23, 2021 at 5:08

Justin Dang

3744 silver badges9 bronze badges

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

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related