title: how to add check box in table using reactjs
body: <p>At what i m trying to do is i want to make checkbox in table using react js .but in my below in first not able to check box shown. i m trying to do is n my below code but i am unable to do is in my below code,and i also want to make one submit button inside table using reactjs .</p>
  <p>anyone help me out this. I m stuck on that.its very thankful.</p>
  <p>check her in my code <a href="https://codepen.io/svpan/pen/NWdJvmX" rel="nofollow noreferrer">https://codepen.io/svpan/pen/NWdJvmX</a></p>
  <pre><code>class TableComponent extends React.Component {
    state = {};
  
    handleRowClick = async (rowID) =&gt; {
      // make an API call here, sth like
      console.log(rowID)
      const url1 = &quot;https://grandiose-mulberry-garnet.glitch.me/query?id=&quot;+rowID;
      const url2 = &quot;https://grandiose-mulberry-garnet.glitch.me/params/&quot;+rowID;
      // const url = &quot;https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54&quot;;
      // you can use any of the above API to test.
      const response = await fetch(url1);
      const res = await response.json();
      // console.log(res)
      this.setState({
        ...res,
      });
      window.open(res.url, '_blank');
    };
  
    render() {
      var dataColumns = this.props.data.columns;
      var dataRows = this.props.data.rows;
  
      var tableHeaders = (
        &lt;thead&gt;
          &lt;tr&gt;
            {&quot; &quot;}
            {dataColumns.map(function (column) {
              return &lt;th&gt; {column} &lt;/th&gt;;
            })}{&quot; &quot;}
          &lt;/tr&gt;{&quot; &quot;}
        &lt;/thead&gt;
      );
  
      var tableBody = dataRows.map((row) =&gt; {
        return (
          &lt;tr onClick={() =&gt; this.handleRowClick(row.id)} key={row.id}&gt;
            {&quot; &quot;}
            {dataColumns.map(function (column) {
              return (
                &lt;td&gt;
                  {&quot; &quot;}
                  &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; href={row.url}&gt;
                    {&quot; &quot;}
                    {row[column]}{&quot; &quot;}
                  &lt;/a&gt;
                &lt;/td&gt;
              );
            })}{&quot; &quot;}
          &lt;/tr&gt;
        );
      });
  
      // Decorate with Bootstrap CSS
      return (
        
        &lt;table className=&quot;table table-bordered table-hover&quot; width=&quot;100%&quot;&gt;
          {&quot; &quot;}
          {tableHeaders} {tableBody}{&quot; &quot;}
        &lt;/table&gt;
       
      );
    }
  }
   
  // Example Data
  var tableData = {
    
   columns: ['Select','Service_Name', 'Cost/Unit'],
    rows: [{
      'Service_Name': 'airplane',
      'Cost/Unit': 50,
      'id': 1
     
    }, {
      'Service_Name': 'cat',
      'Cost/Unit': 50,
      'id': 2
    },{
      'Service_Name': 'fruits',
      'Cost/Unit': 50,
      'id': 5
    }, {
      'Service_Name': 'pool',
      'Cost/Unit': 50,
      'id': 4
    }]
  };
   
  
  ReactDOM.render(
    &lt;TableComponent data = {tableData} /&gt;,
    document.getElementById('table-component')
  
  );
  </code></pre>