How to render element on click of button: ReactJS

by

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' />

More Related Contents:

  1. Build an HTML table using React from arrays [closed]
  2. “SyntaxError: Unexpected token < in JSON at position 0"
  3. How to delete an item from state array?
  4. ReactJS – Does render get called any time “setState” is called?
  5. React onClick function fires on render
  6. React Js conditionally applying class attributes
  7. How to access a child’s state in React
  8. ESLint Parsing error: Unexpected token
  9. Is there any way to update a specific index from the array in Firestore
  10. Detecting when user scrolls to bottom of div with React js
  11. Is there a synchronous alternative of setState() in Reactjs
  12. ES6 array map doesn’t return anything: ReactJS
  13. Why React Hook useState uses const and not let
  14. When is it appropriate to use a constructor in REACT?
  15. Use Async/Await with Axios in React.js
  16. How target DOM with react useRef in map
  17. Event target is null inside functional setState
  18. Sort an array of objects in React and render them
  19. How can I update an object inside of an array in firestore? [duplicate]
  20. Increase JavaScript Heap size in create-react-app project
  21. How to set initial state for useState Hook in jest and enzyme?
  22. Global state in React Native
  23. using css modules how do I define more than one style name
  24. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  25. How to mock React component methods with jest and enzyme
  26. Could not find “store” in either the context or props of “Connect(App)”
  27. Function inside functional component in React hooks – Performance
  28. Class based component vs Functional components what is the difference ( Reactjs ) [duplicate]
  29. value of using React.forwardRef vs custom ref prop
  30. create-react-app is showing all my code in production, how to hide it?

Leave a Comment