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. i m 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')

);

in my above code i want to make only when select any checkbox any row then click on submit button then url image is open — sneha, Apr 30 '21 at 13:19
but right now in my code when i select checkbox then automatic open url image without click button — sneha, Apr 30 '21 at 13:19
okay then if you remove onClick from `tr` then it will not fetch image. — Priyank Kachhela, Apr 30 '21 at 13:20
okk.then how can we do like that i want to make only when select any checkbox any row then click on submit button then url image is open.any idea and help?? — sneha, Apr 30 '21 at 13:20
@PriyankKachhela yes simply i want to make when select any checkbox any row like row 1,2 etc then click on submit button then url image is open — sneha, Apr 30 '21 at 13:46

score 1 · Answer 1 · answered Apr 30 '21 at 13:27

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

thanks for this but my problem is different – sneha Apr 30 '21 at 13:29 — sneha, Apr 30 '21 at 13:29
u got my point what i m trying to resolve – sneha Apr 30 '21 at 13:30 — sneha, Apr 30 '21 at 13:30

score 1 · Accepted Answer · answered Apr 30 '21 at 14:10

1

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

answered Apr 30 '21 at 14:10

Priyank Kachhela

2,517
8
16

Your welcome. If you find this answer useful. Please upvote it and help others to find answers quickly. – Priyank Kachhela Apr 30 '21 at 14:50

how to make button click then image is opened using reactjs

2 Answers2