How to modify an existing div element in html by react?

Question

Is it possible to use react to show and hide an existing div element by id?

For example, I want use react to have this <div id="example">this is example</div> show and hide by button click and this element is not created by react.

Answer 1

First you need to understand React's philosophy. I strongly suggest you read the official React tutorial: https://reactjs.org/tutorial/tutorial.html. In this case you would like to appear and disappear a div, this can be accomplished by changing internal state of a React Component. Then you need to create a function that is bound to the context of the instance of the Component. For example:

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: true,
    };
  }

  toggle() {
    const { open } = this.state;
    this.setState({
      open: !open,
    });
  }

  render() {
    const { open } = this.state;
    return (
      <main>
        <button onClick={this.toggle.bind(this)}>{open ? 'Hide' : 'Show'}</button>
        {open && <div id="example"><h1>this is example</h1></div>}
      </main>
    );
  }
}

Here's a codepen: https://codepen.io/anon/pen/PxWdZK?editors=1010