I don't know what's inside toggleDrawer function but I'm pretty much sure that toggleDrawer function executes same for both the iteration as there is no differentiating parameter for each iteration. Or in other words, you are supposed to know in which iteration toggleDrawer function is called so that you can capture the corresponding iteration value and set it to the state. Later, use the state value to indicate the clicked button.
Ex:
state = {
...
selectedBottom: 0
}
toggleDrawer(blah, blah, bottomIndex) {
.... your other logic
this.setState({ selectedBottom: bottomIndex })
}
render() {
return (
<div>
{Colors.map((color,index) =>
(<div
key={index}
onClick={() => this.toggleDrawer("bottom", true, index)}>
....
</div>)
)}
.... .
...
<div> clicked button {this.state.selectedBottom + 1}
</div>
);
}
I hope I've answered your question, let me know if not. Cheers!