I am new to react. How to render a component only after clicking a button in react?

Here in my case on clicking a button I have to display a table which displays the data from the database.

I have attached my code below for your reference, the first component is the button component and below that you can find the components for the table.

Also I would like to know how to refresh a component on clicking a button without refreshing the entire page.

var Button = React.createClass({

render: function () {

        return (

           <button type=button>Display</button>



            ); }

});



var EmployeeRow = React.createClass({



    render: function () {

        return (

            <tr>

                  <td>{this.props.item.EmployeeID}</td>

                  <td>{this.props.item.FirstName}</td>

                  <td>{this.props.item.LastName}</td>

                  <td>{this.props.item.Gender}</td>                                                   

              </tr>



            );

    }

});



  var EmployeeTable = React.createClass({



      getInitialState: function(){



          return{

              result:[]

          }

      },

      componentWillMount: function(){



          var xhr = new XMLHttpRequest();

          xhr.open('get', this.props.url, true);

          xhr.onload = function () {

              var response = JSON.parse(xhr.responseText);



              this.setState({ result: response });



          }.bind(this);

          xhr.send();

      },

      render: function(){

          var rows = [];

          this.state.result.forEach(function (item) {

              rows.push(<EmployeeRow key={item.EmployeeID} item={item} />);

          });

          return (

<Button />

  <table className=table>

     <thead>

         <tr>

            <th>EmployeeID</th>

            <th>FirstName</th>

            <th>LastName</th>

            <th>Gender</th>               

         </tr>

     </thead>

      <tbody>

          {rows}

      </tbody>

  </table>



  );

  } });



  ReactDOM.render(<EmployeeTable url=api/Employee/GetEmployeeList />,

          document.getElementById('grid'))