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 .

anyone help me out this. I m stuck on that.its very thankful.

check her in my code https://codepen.io/svpan/pen/NWdJvmX

class TableComponent extends React.Component {

  state = {};



  handleRowClick = async (rowID) => {

    // make an API call here, sth like

    console.log(rowID)

    const url1 = "https://grandiose-mulberry-garnet.glitch.me/query?id="+rowID;

    const url2 = "https://grandiose-mulberry-garnet.glitch.me/params/"+rowID;

    // const url = "https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54";

    // 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 = (

      <thead>

        <tr>

          {" "}

          {dataColumns.map(function (column) {

            return <th> {column} </th>;

          })}{" "}

        </tr>{" "}

      </thead>

    );



    var tableBody = dataRows.map((row) => {

      return (

        <tr onClick={() => this.handleRowClick(row.id)} key={row.id}>

          {" "}

          {dataColumns.map(function (column) {

            return (

              <td>

                {" "}

                <a target="_blank" rel="noopener noreferrer" href={row.url}>

                  {" "}

                  {row[column]}{" "}

                </a>

              </td>

            );

          })}{" "}

        </tr>

      );

    });



    // Decorate with Bootstrap CSS

    return (

      

      <table className="table table-bordered table-hover" width="100%">

        {" "}

        {tableHeaders} {tableBody}{" "}

      </table>

     

    );

  }

}

 

// 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(

  <TableComponent data = {tableData} />,

  document.getElementById('table-component')



);