javascript - React shared state: highlight which component is selected

Question

I'm pretty new to react, and am working on a big existing codebase.

This website has a list of components (square blocks), and when I press on one of them (say Block1), I want that one (Block1) to change from white to a blue background color. If I press on another block (say Block3), then I want the previous block (Block1) to change back to white, and the block I just selected (Block3) to change to blue.

I have a List file with a functional component that returns a list of blocks, like so:

ItemList() {
   return ({edge.map() => return <Block />}) //this basically returns like 10 Blocks
}

Block Component File

Block() {
   return (<div> blah blah </div>)
}

What's the easiest way for me to do this? I currently have a state inside of the Block() component, but this isn't letting me update when I press on another block, and want this block to change back.

Answer 1

1. State selectedBlock should be stored in ItemList and passed down to the blocks
2. ItemList should send a function setSelectedBlock to the children which will be called inside them inside the onClick.
3. Each block will receive a key from the map function
4. Inside the block check bgColor = props.key === props.selectedBlock ? 'blue' : 'white'
5. Apply the color with inline CSS
6. Feel free to ask any questions on this!