I've been working on a table in React and I'm trying to implement a feature where clicking on a cell colors it, and clicking on another cell uncolors the previous one. So far, I've managed to color cells upon clicking but I'm stuck on how to uncolor them when a different cell is clicked. Since the cell itself doesn't know about other cells being clicked, I'm having trouble figuring out the best approach. As a result, multiple clicks leave me with numerous colored cells instead of just one.
Below is my current cell code:
class Cell extends React.Component {
state = {
bgColor: 'inherit'
}
handleClick = (columnId) => {
this.setState({
bgColor: "blue"
})
}
render() {
const content = this.props.content;
return (
<td
onClick={()=> this.handleClick()}
style={{backgroundColor: this.state.bgColor}}
>
{content}
</td>
)
}
}
Thank you for any assistance you can provide!