I’ve been struggling with adding a class to a div dynamically in react and dynamically changing the classes on all other sibling components on that same event (think the windows calendar when choosing a date around the calendar it unselects the previously selected). How would one go about doing this? This is what I have so far…
Parent Component-
class App extends React.Component{
constructor(props){
super(props)
this.state = {
chosen:’’,
test: [1,2,3,4]
}
}
render(){
return (
{this.state.test.map((x)=> <Days cont = {x} />)}
</div>
);
}
}
Child Component-
class Days extends React.Component {
constructor(props) {
super(props);
this.state = {
isSelected: false
};
this.toggle = this.toggle.bind(this);
}
toggle(e) {
this.setState({
isSelected: !this.state.isSelected
});
}
render() {
return (
<div
className={this.state.isSelected ? “active” : “”}
onClick={this.toggle}
>
{this.props.cont}
</div>
);
}
}