how to make button click then image is opened using reactjs

Question

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

But right now in my code when i click on checkbox row 1st then automatic open image url without click on submit button.but i want to make when i click on 1st row checkbox checked then click submit button then image is open like that in all row.

how can we do that any idea on that. im new in this part.

anybody help me out. its very thankful

mycode 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) {
            if(column == 'Select')
              return (
              <td>
                 <input type="checkbox" />
              </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" />
    </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

It looks like your issue is NOT on the code provided.

I tried to do almost the same thing you do, but changed the url1 and url2 for the mocky.io you provided.

the code looks like this

handleRowClick = async (rowID) => {
  // make an API call here, sth like
  console.log(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(url);
  const res = await response.json();
  console.log(res[0])
  window.open(res[0].url, '_blank');
};

The rest of it looks exactly the same. So, this works.. What seems to be the case is that your issue is related to CORS Allow headers. Meaning that you need to change the response of the server (this website grandiose-mulberry-garnet.glitch.me)

I leave you something to chew on, maybe it's helpful: Getting "TypeError: failed to fetch" when the request hasn't actually failed

Answer 2

First you need to take create one state and create one method which will store rowId when checkbox is changed

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

Now on submit button you need to call handleRowClick function like this

<input
  type="submit"
  value="submit"
  onClick={() => this.handleRowClick(this.state.selectedRow)}
/>

Working demo here