title: Display a component on clicking a button in React
body: <p>I am new to react. How to render a component only after clicking a button in react? </p>
  
  <p>Here in my case on clicking a button I have to display a table which displays the data from the database. </p>
  
  <p>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. </p>
  
  <p>Also I would like to know how to refresh a component on clicking a button without refreshing the entire page. </p>
  
  <pre><code>var Button = React.createClass({
  render: function () {
          return (
             &lt;button type="button"&gt;Display&lt;/button&gt;
  
              ); }
  });
  
  var EmployeeRow = React.createClass({
  
      render: function () {
          return (
              &lt;tr&gt;
                    &lt;td&gt;{this.props.item.EmployeeID}&lt;/td&gt;
                    &lt;td&gt;{this.props.item.FirstName}&lt;/td&gt;
                    &lt;td&gt;{this.props.item.LastName}&lt;/td&gt;
                    &lt;td&gt;{this.props.item.Gender}&lt;/td&gt;                                                   
                &lt;/tr&gt;
  
              );
      }
  });
  
    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(&lt;EmployeeRow key={item.EmployeeID} item={item} /&gt;);
            });
            return (
  &lt;Button /&gt;
    &lt;table className="table"&gt;
       &lt;thead&gt;
           &lt;tr&gt;
              &lt;th&gt;EmployeeID&lt;/th&gt;
              &lt;th&gt;FirstName&lt;/th&gt;
              &lt;th&gt;LastName&lt;/th&gt;
              &lt;th&gt;Gender&lt;/th&gt;               
           &lt;/tr&gt;
       &lt;/thead&gt;
        &lt;tbody&gt;
            {rows}
        &lt;/tbody&gt;
    &lt;/table&gt;
  
    );
    } });
  
    ReactDOM.render(&lt;EmployeeTable url="api/Employee/GetEmployeeList" /&gt;,
            document.getElementById('grid'))   
  </code></pre>