score:28

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)

score:4

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() {
  this.setState({
    show: true
  });
}

Call the function on click of the button.

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

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

{
  this.state.show &&
  <table className="table">
     <thead>
         <tr>
            <th>EmployeeID</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Gender</th>               
         </tr>
     </thead>
      <tbody>
          {rows}
      </tbody>
  </table>
}

Hope this helps!


Related Query

More Query from same tag