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 extends Component {
  constructor() {
    super();
    this.createText = this.createText.bind(this);
  }


  createText() {
    return(
      <p>hello friend</p>
    )
  }


  render() {
    return (
      <div className="App">
        <button onClick={this.createText}>Click</button>
      </div>
    );
  }
}

export default App;

Here I am trying to render "hello friend" when the button is clicked. But is not working.

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 ( <div className="App"> <button onClick={this.createText}>Click</button> {this.state.isShow && <p>Hello World!!!</p>} </div> ); } } ReactDOM.render(<App />, document.getElementById('app'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app' />