How to get current value onClick from an array of items in React js?

Question

I have a list of colors and I'm trying to get the current color onClick from the list but instead I get the entire list of colors. I have a child component where I'm mapping the array:

function Child({colorList, setBackgroundColor}){
return(
<Box>
{colorList.map((i,key)=>
            <List key={key}>
                <ListItem >
                <IconButton icon={<FiCircle  fill={i}/>} onClick={setBackgroundColor}  color={i}/>
                </ListItem>
            </List>
</Box>
)
}

and I'm passing the values in the parent component:

function Parent(){
  const [bgColor,setBgColor] = useState('')
const [colorList, setColorList] = useState(['blue','red','green'])

 function setBackgroundColor(){
       const selectedValue = colorList.filter((color,key)=>color[key])
       setBgColor(selectedValue)
        console.log(bgColor)
    }

return(
<Child colorList={colorList} setBackgroundColor={setBackgroundColor}/>
)
}

When I'm explicitly passing the index setBgColor(selectedValue[0]) it works. Can someone please help me understand what I'm doing wrong? Any help would be appreciated!

Andrii Svirskyi · Accepted Answer · 2022-02-02 05:59:27Z

1

First - don't call a first param in map method as "i" if you do map for colors then it is 'color'

Second - You can write:

 <IconButton
  icon={<FiCircle fill={i} />}
  onClick={() => {
    setBackgroundColor(i);
  }}
  color={i}
/>

and you function setBackgroundColor will get your color when you click on that

answered Feb 2, 2022 at 5:59

Andrii Svirskyi

3761 silver badge4 bronze badges

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

Collectives™ on Stack Overflow

How to get current value onClick from an array of items in React js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related