CODEWITHSUNDEEP
arraysreactjsfilterreact-props
Icarus23
Icarus23

Reputation: 187

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

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!

Upvotes: 0

Views: 2065

Answers (1)

Andrii Svirskyi
Andrii Svirskyi

Reputation: 376

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

Upvotes: 1

Related Questions