I am trying to figure out how to toggle an active class onClick to change CSS properties.
I have taken many approaches, and read many SO answers. Using jquery it would be relatively simple , however, I cannot figure out to do this with react. My code is below. Can anyone advise how I should do this?
Without creating a new component for each item is it possible to do this?
class Test extends Component(){
constructor(props) {
super(props);
this.addActiveClass= this.addActiveClass.bind(this);
}
addActiveClass() {
//not sure what to do here
}
render() {
<div>
<div onClick={this.addActiveClass}>
<p>1</p>
</div>
<div onClick={this.addActiveClass}>
<p>2</p>
</div>
<div onClick={this.addActiveClass}>
<p>3</p>
</div>
</div>
}
}
Use state. Reacts docs are here.
class MyComponent extends Component {
constructor(props) {
super(props);
this.addActiveClass= this.addActiveClass.bind(this);
this.state = {
active: false,
};
}
toggleClass() {
const currentState = this.state.active;
this.setState({ active: !currentState });
};
render() {
return (
<div
className={this.state.active ? 'your_className': null}
onClick={this.toggleClass}
>
<p>{this.props.text}</p>
</div>
)
}
}
class Test extends Component {
render() {
return (
<div>
<MyComponent text={'1'} />
<MyComponent text={'2'} />
</div>
);
}
}
You can also do this with hooks.
function MyComponent (props) {
const [isActive, setActive] = useState(false);
const toggleClass = () => {
setActive(!isActive);
};
return (
<div
className={isActive ? 'your_className': null}
onClick={toggleClass}
>
<p>{props.text}</p>
</div>
);
}
I would prefer using "&&" -operator on inline if-statement. In my opinnion it gives cleaner codebase this way.
Generally you could be doing something like this
render(){
return(
<div>
<button className={this.state.active && 'active'}
onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>
</div>
)
}
Just keep in mind arrow function is ES6 feature and remember to set 'this.state.active' value in class constructor(){}
this.state = { active: false }
or if you want to inject css in JSX you are able to do it this way
<button style={this.state.active && style.button} >button</button>
and you can declare style json variable
const style = { button: { background:'red' } }
remember using camelCase on JSX stylesheets.