CODEWITHSUNDEEP
javascriptreactjs
Ben
Ben

Reputation: 109

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

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

Upvotes: 0

Views: 4518

Answers (5)

Amruth
Amruth

Reputation: 5912

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

Upvotes: 2

Justin Dang
Justin Dang

Reputation: 374

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

Upvotes: 0

Sifat Haque
Sifat Haque

Reputation: 6057

  1. First you need to pass the index as argument. onClick={(e) => onClick(e, index)}

  2. Then receive that index as functional parameter.

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

Upvotes: 1

user16730065
user16730065

Reputation:

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

Upvotes: 0

Hans Krohn
Hans Krohn

Reputation: 433

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

Upvotes: 3

Related Questions