React JS Toogle Class - reactjs

Question

I have a project that I am developing with React JS. The problem is that I have a button and when I click on it, I just want the icon on the button I click to change. But the icons on all the buttons I click change. My code is below.
constructor(props){
super(props)
this.state={
icon: false
}
}
active = (event) => {
this.setState({icon: !this.state.icon})
}
.....
const menu = ['A','B','C','A','B','C','A','B','C']
<div className="nav_menu">
<ul>
{menu.map((item,index) =>
<li key = {index}>
<Link data-id = {index} className="inactive" to={`${match.url}`} onClick={this.active}>
<span>
<span>
<FontAwesomeIcon icon={faHome} className="icon"/>
</span>
{item}
</span>
<FontAwesomeIcon data-id = {index} icon={icon ? faAngleDown:faAngleRight} className="angle"/>
</Link>
</li>
)}
</ul>
How do I fix this?

Answer 1

Having just one variable wouldn't suffice as you are not storing which button index has been clicked to accurately show the icon on only that button.
constructor(props){
super(props)
this.state={
icon: false,
clickedIndex: -1,
}
}
active = (clickedIndex)=> (event) => {
this.setState(prevState => ({icon: !prevState.icon, clickedIndex }));
}
.....
const menu = ['A','B','C','A','B','C','A','B','C']
<div className="nav_menu">
<ul>
{menu.map((item,index) =>
<li key = {index}>
<Link data-id = {index} className="inactive" to={`${match.url}`} onClick={this.active(index)}>
<span>
<span>
<FontAwesomeIcon icon={faHome} className="icon"/>
</span>
{item}
</span>
<FontAwesomeIcon data-id = {index} icon={(icon && index === this.state.clickedIndex) ? faAngleDown:faAngleRight} className="angle"/>
</Link>
</li>
)}
</ul>

Answer 2

Sample how you can select particular. live demo https://codesandbox.io/s/focused-browser-fls2w
export default class Abc extends Component {
constructor(props) {
super(props);
this.state = { icon: false };
}
active = item => {
this.setState({ icon: item });
};
render() {
const menu = ["A", "B", "C", "A", "B", "C", "A", "B", "C"];
return (
<div className="nav_menu">
<ul>
{menu.map((item, index) => (
<li
key={index}
onClick={() => this.active(index)}
style={{ color: this.state.icon === index ? "red" : "" }}
>
{item}
</li>
))}
</ul>
</div>
);
}
}