How to render element on click of button: ReactJS

Question

I am trying to render a paragraph as soon as the you click the button.

Here is my code.

import React, { Component } from \'react\';

class App exte         


        

Answer 1

This is not the correct way because createText is a event handler it will not render the element, what you need is "Conditional rendering of elements".

Check Docs for more details Conditional Rendering.

Steps:

1- Use a state variable with initial value false.

2- Onclick of button update the value to true.

3- Use that state value for conditional rendering.

Working Code:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isShow: false
    }
    this.createText = this.createText.bind(this);
  }


  createText() {
    this.setState({ isShow: true }) 
  }


  render() {
    return (
      

        Click
        {this.state.isShow && 
Hello World!!!
}
      
    );
  }
}

ReactDOM.render(, document.getElementById('app'))