<div id="root"></div>

const Link = () => (
  <div>This is a link component</div>
)

class App extends React.Component {
  
  state = {
    change: true
  }

  handleChange = (event) => {
    this.setState({change: !this.state.change})
  }
  
  render() {
    const { change } = this.state
    return(
      <div>
        <div>
          <button onClick={this.handleChange}>Change</button>
        </div>

        {
          change ? 
          <div>
            This is div cause it's true
            <h2>This is a h2 element in the div</h2>
            <Link />
          </div> :
          <p>
            This is a p element cause it's false
            <br />
            <span>This is another paragraph in the false paragraph</span>
            <Link />
          </p>
        }
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.development.js