Accepted answer

I've set up a sandbox to showcase how you can do this.

In essence:

  1. Initialise state with a boolean set to false
  2. Render the component conditionally based on this boolean; so initially the component will now show up on the DOM
  3. On some action (onClick), setState on the boolean to true
  4. The component will re-render since the state changed and will now show the hidden component (since the boolean has been set to true)


You can do something like this.

First Initialize the state with a property show with false when the component mounts.

componentDidMount() {
  this.state = {
    show: false

Add a function to change the state. (You can use this function to toggle state as well)

showTable() {
    show: true

Call the function on click of the button.

<button onclick="showTable()">
  Show Table

Add your table inside braces along with the expression like this.

{ &&
  <table className="table">

Hope this helps!

Related Query

More Query from same tag