REACT - toggle class onclick

Question

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

Answer 1

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 (
            

                
{this.props.text}
            
        )
  }
}

class Test extends Component {
    render() {
        return (
            

                
                
            
        );
    }
}