Change parent state on a child envent - reactjs

Question

I want to put all my 'isSelected' to false expect the clicked one.
Code :
class Parent extends Component {
state= {
menu:[
{isSelected:true},
{isSelected:false},
{isSelected:false}
]
}
render() {
let menus=this.state.menu.map((menu,i)=>(
<MenuElem isSelected={menu.isSelected} />
))
return
{menus}
);
}
}
class MenuElem extends Component {
state = {
isSelected: this.props.isSelected
}
render() {
const {isSelected} = this.state;
let clickHandler = ()=>{
this.setState({ isSelected: true })
//I want to put all the MenuElem to false : except the clicked one
// let parent = this._reactInternalInstance._currentElement._owner._instance; ??
// then foreach MenuElem in my parent I change the isSelected ?
}
return (
<li onClick={clickHandler} className={isSelected ? "is-active" : ""}></li>
);
}
}
I'am not sure my logic is the good one.
The this._reactInternalInstance._currentElement._owner._instance looks like Im in the wrong way.

Answer 1

There are all sorts of cleaning that could be done to this code but below I rewrote what you had and allowed the child to update the parent's state. I trust you have a valid reason to do this and not manage the state of the li at the li level. Hope this helps.
class Parent extends Component {
state = {
menu:[
{ isSelected: true },
{ isSelected: false },
{ isSelected: false }
]
}
render() {
const { menu } = this.state;
return (
{ menu.map((menu,i) => {
return <MenuElem
isSelected={menu.isSelected}
onClick={() => {
const newMenu = [...menu];
newMenu[i] = !menu[i]
this.setState({ menu: newMenu }) }
}
/>
})};
);
}
}
class MenuElem extends Component {
render() {
const { onClick, isSelected } = this.props;
return (
<li onClick={onClick} className={isSelected ? "is-active" : ""}></li>
);
}
}
Edit: In the case where you don't really need the state stored in the parent you could just as easily do:
class Parent extends Component {
render() {
return (
{ menu.map((menu,i) => <MenuElem key={i}/> }
);
}
}
class MenuElem extends Component {
state = { isSelected: false }
render() {
const { isSelected } = this.state
return (
<li onClick={() => {this.setState({ isSelected: !isSelected })}} className={isSelected ? "is-active" : ""}></li>
);
}
}