React toggle component

You need to get or set it via state:

class Parent extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            active: true,
        };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({
            active: !this.state.active
        });
    }

    render() {
        return (
            <div>
                <OtherComponent />

                {this.state.active && <Child />}

                <button type="button" onClick={this.handleClick}>
                    Toggle
                </button>

            </div>
        )
    }
}

Note that with this approach you will re:render the entire parent component (as well as it's children).
Consider using another approach, when you are passing a prop to the child component and it will render itself with content based on this prop (it can render an empty div or something).
There are number of libraries that make this job easy for you, like react-collapse with animations and stuff.

You should only use state and props to manage your app state.

So instead try:

class Parent extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
        active: true
    };
    this.handleClick = this.handleClick.bind(this);
  }

  const handleClick = () => {
    this.setState({active = !this.state.active});
  }

  render() {      
    return (    
      <div>  
        <OtherComponent />
        {this.state.active && <Child />}
        <button type="button" onClick={handleClick}>
          Toggle
        </button>
      </div>            
    );          
  }
}

---

Alernatively, you could use forceUpdate() to force a re-render, but this is strongly discouraged:

const handleClick = () => {
  active = !active;
  this.forceUpdate();
}