How Do I Change The Css Of Classes Through React Dynamically

My question is regarding changing the CSS of classes through another class. I'm aware that I can only change the CSS if the element we're trying to change is adjacent or a sibling

Solution 1:

The className and style directives accepts interpolation of a dynamic value. You can use this to achieve what you want.

classHelloextendsReact.Component{
  constructor(props) {
    super(props);
    this.state = { style: {} };
    this.bloodyMary = this.bloodyMary.bind(this);
  }

  bloodyMary() {
    this.setState({
      style: { backgroundColor: 'red' },
      class: 'someclass'
    });
  }

  render() {
    return <div style={this.state.style} className={this.state.class}>
      <a onClick={this.bloodyMary}>Bloody Mary</a>
    </div>;
  }
}

Take a look at the online demo