how to fetch api data using react js

Question

At what i am trying to do is when i click on checkbox 1st row in table and then click submit button then url image is not open .

i want to make when i click on checkbox then click submit button then url image is open.

how can we do that any idea or help its very thankful.

my code https://codepen.io/svpan/pen/NWdJvmX?editors=1010

let ref = null;
class TableComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRow: ""
    };
    ref = this;
  }

  handleRowClick = async (rowID) => {
    // make an API call here, sth like
    console.log(rowID);
    if (rowID) {
      const url1 =
        "https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e?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");
    }
  };

  onSelectChange = (rowId) => {
    this.setState({
      selectedRow: rowId
    });
  };

  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 key={row.id}>
          {dataColumns.map(function (column) {
            if (column == "Select")
              return (
                <td>
                  <input
                    type="checkbox"
                    checked={ref.state.selectedRow === row.id}
                    onChange={() => ref.onSelectChange(row.id)}
                  />
                </td>
              );
            else
              return (
                <td>
                  <a target="_blank" rel="noopener noreferrer" href={row.url}>
                    {row[column]}
                  </a>
                </td>
              );
          })}
        </tr>
      );
    });

    // Decorate with Bootstrap CSS
    return (
      <div>
        <table className="table table-bordered table-hover" width="100%">
          {tableHeaders} {tableBody}
        </table>
        <input
          type="submit"
          value="submit"
          onClick={() => this.handleRowClick(this.state.selectedRow)}
        />
      </div>
    );
  }
}

// Example Data
var tableData = {
  columns: ["Select", "Service_Name", "Cost/Unit"],
  rows: [
    {
      Service_Name: "airplan",
      "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")
);

Answer 1

 handleRowClick = async (rowID) => {
    // make an API call here, sth like
    console.log(rowID);
    if (rowID) {
      const url1 =
        "https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e?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();
      // alert(res.url)
      console.log(res)
      console.log("row id " + rowID)
      
       let object_ = {};
      
      res.map(item=>{
        // console.log(item.url)
        if(item.id === rowID){
          object_ = item;
        }
      })
      
      this.setState({
        ...res
      });
      window.open(object_.url, "_blank");
    }
  };