how to fetch api data dynamically on the basis of click using react js

Question

In react js how to fetch api data dynamically on the basis of click button.in my below code i want to fetch data on the basis of click using react js.how can we do that.

https://mocki.io/v1/be3cb19b-bd49-4a82-b19b-44b859e19d5d my api is this.in my below code i make one table and i want when i click on row 1st that is airplane and when i click first row then fetch airplane data using this api https://mocki.io/v1/be3cb19b-bd49-4a82-b19b-44b859e19d5d .

how can we do that.

is there any help.its very thankful.

var TableComponent = React.createClass({
  render: function() {
    // Data
    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(function(row) {
      return (
        <tr>
          {dataColumns.map(function(column) {
            return <td>{row[column]}</td>; })}
        </tr>); });
    // Decorate with Bootstrap CSS
    return (<table className="table table-bordered table-hover" width="100%">
        {tableHeaders}
        {tableBody}
      </table>) }});
        

// Example Data
var tableData = {
 columns: ['Service_Name', 'Cost/Unit'],
  rows: [{
    'Service_Name': 'airplane',
    'Cost/Unit': 50
   
  }, {
    'Service_Name': 'cat',
    'Cost/Unit': 50
  },{
    'Service_Name': 'fruits',
    'Cost/Unit': 50
  }, {
    'Service_Name': 'pool',
    'Cost/Unit': 50
  }]
};

ReactDOM.render(
  <TableComponent data = {tableData} />,
  document.getElementById('table-component'));

Answer 1

I hope it will help:

const MyTable = ({data}) => {
  const fetchSomething = serviceName => fetch(`https://whatever?service_name=${serviceName}`).then(...);

  return (
    <Table>
      <tr>
        {data.columns.map(column => (<th key={column}>{column}</th>))}
      </tr>
      {data.rows.map((row, index) => (
        <tr key={index} onClick={fetchSomething(row['Service_Name'])}>
          <td>{row['Service_Name']}</td>
          <td>{row['Cost/Unit']}</td>
        </tr>
      ))}
    </Table>
    )
}

Answer 2

Probably you need something like this. Steps for implementation:

1. Add a click listener on your row
2. Implement handleRowClick function similar to the below implementation. Save all that you need from the response to the React state.
3. Show the result somewhere in UI, or just console.log it.

Here is some code below that might help you

class TableComponent extends React.Component {
  state = {};

  handleRowClick = async () => {
    // make an API call here, sth like
    const url = "https://mocki.io/v1/be3cb19b-bd49-4a82-b19b-44b859e19d5d";
    const response = await fetch(url);
    this.setState({
      ...response,
    });
  };

  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}>
          {" "}
          {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: ["Service_Name", "Cost/Unit", "Unit", "Units Requested"],
  rows: [
    {
      Service_Name: "airplane",
      "Cost/Unit": 50,
      Unit: "1 Hour",
      "Units Requested": 12,
      url:
        "http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/asteroid_blue.png",
    },
    {
      Service_Name: "cat",
      "Cost/Unit": 50,
      Unit: "1 Hour",
      "Units Requested": 12,
      url:
        "http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_background.png",
    },
    {
      Service_Name: "fruits",
      "Cost/Unit": 50,
      Unit: "1 Hour",
      "Units Requested": 12,
      url:
        "http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/asteroid_blend.png",
    },
    {
      Service_Name: "pool",
      "Cost/Unit": 50,
      Unit: "1 Hour",
      "Units Requested": 12,
    },
  ],
};

ReactDOM.render(
  <TableComponent data={tableData} />,
  document.getElementById("table-component")
);