How to toggle class of a div element by clicking on button in react js?

Question

I want to toggleclass name of one element by clicking on another element. Both elements are in separate component files. I don't know how to get the state of an element and pass it to another element. Please help me solving the problem.

file1.js

<Button onClick={this.toggleFunction}>Button</Button>

file2.js

<div class="wrapper"></div>

I want to toggle class active on wrapper div when the button is clicked.

Thanks

Answer 1

Parent Component 
        import React from "react";
        import ButtonComponent from "./buttonComponent";
        import "./demo.css";

        //Parent  Component
        class Demo extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
              active: false
            };
          }

          updateValue = value => {
            this.setState({
              active: value
            });
          };
          render() {
            return (
              <div>
                <ButtonComponent updateParent={this.updateValue} />
                <div
                  className={
                    this.state.active ? "dropdownbutton1" : "dropdownbutton1Active"
                  }
                >
                  <label>First</label>
                  <br />
                  <select>
                    <option value="yes">yes</option>
                    <option value="no">no</option>
                  </select>
                </div>
              </div>
            );
          }
        }

        export default Demo;
Child Component 

        import React from "react";
        import ToggleButton from "react-toggle-button";
        import "./demo.css";

        class ButtonComponent extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
              active: false,
              defaultValue: 1
            };
          }

          togglebutton = () => {
            this.props.updateParent(this.state.active);
            this.setState({ active: !this.state.active });
            if (this.state.active) {
              this.setState({ defaultValue: 1 });
            } else {
              this.setState({ defaultValue: -1 });
            }
          };
          render() {
            return (
              <div>
                <div className="ToggleButton">
                  <ToggleButton onClick={this.togglebutton} value={this.state.active} />
                </div>
              </div>
            );
          }
        }

        export default ButtonComponent;

Link :https://codesandbox.io/s/m4py2y97zp

Answer 2

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>
        )
  }
}