How to load data on button click using react

Question

In my below code i have one table and when i select radio button and click on submit button then load the data and show in console. this is fine.

but in my table i have many data in table body. and when i select 1st row radio button then click submit button, then load data and show in console. that is fine. but again i select 2nd row radio button and click submit button, then i am not able to fetch data and show in console. and again i select the 3rd row and select radio button and click submit button then i m getting data in console.like that

why i'm getting like this?

class ProvFileRptSearchResult extends React.Component {
constructor(props) {
    super();
  
    this.state = {
        pymtDetails:[],
        data: [],
        rowDetails:[],
        checkbox: false
        
       };
    //    this.handleFile=this.handleFile.bind(this);
         this.handleClick=this.handleClick.bind(this);
   
}
    handleClick() {
        const apiUrl = "https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e";
        if (this.state.checkbox) {
          fetch(apiUrl)
            .then((response) => response.json())
            .then((data) => {
              this.setState({ data: data });
              console.log("This is your data", data);
              window.open("https://example.com", "_blank");
            })
        } else {
          alert("Data not fetched!");
        }
        // console.log('click');
      }




render()
    {
        return(
            <div>
                <div className="table-employee" style={{ marginTop:"20px",border:" 1.5px solid darkgray" }}>
            <table className="table table-hover table-bordered table-sm">
            <thead>
            <tr >
            <th scope="col">Select</th>
            <th scope="col"> LOAD DATE</th>
            <th scope="col"> FILE DATE</th>
                <th scope="col"> SERVICE</th>
                <th scope="col"> PROVISIONER CODE </th>
                <th scope="col"> DESCRIPTION</th>
                
               
            </tr>
            </thead>
            <tbody>
                     {
                     this.props.customerDetails.map((type,j)=>{
                        return(
 
                        <tr> 
                        <td ><input type="radio" preventDefault name="select"  key={j}  onClick={(e) =>this.rowSelected(j)} value={this.state.checkbox}
                    onChange={(e) =>
                      this.setState({ checkbox: !this.state.checkbox })
                    }/></td>
                         <td> {type.provis_file_stamp}</td>
                          <td> {type.provis_file_hdrdt}</td>
                          <td> {type.service_code}</td>
                            <td>{type.provisioner_code}</td>
                            <td>{type.provisioner_desc}</td>   
                            
                            </tr>
                        )
                     })
                         
                }

            </tbody>
            </table>
            </div>
            <div className="btn-submit" >
                            <button className="btn btn-primary" style={{marginRight:"30px"}}  type="submit" onClick={this.handleClick}>FILE</button>
                               
                        </div>
            
    </div>
        )
    }

@AjeetShah so can i make it true checkbox: true like that but not worked yet — sneha, May 05 '21 at 12:18
@AjeetShah or plz can u show me something any other idea.its very thankful — sneha, May 05 '21 at 12:20
@AjeetShah yes i already try which u shared link to use radio button but not worked can u plz show me something in here https://codesandbox.io/s/o8tu5?file=/index.js its very thankful — sneha, May 05 '21 at 12:25
@AjeetShah one more help but i want to make when i click first row then open url and again i click 2nd row then open different url same again i click 3rd row then open different url.how can we do that isit possible to do that like that — sneha, May 05 '21 at 12:33
yes right i want open different different url like when i select 1st row then open this url http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/asteroid_brown.png and when select 2nd row then open this url https://homepages.cae.wisc.edu/~ece533/images/pool.png and when select 3rd row then open this https://example.com/ like that — sneha, May 05 '21 at 12:40
@AjeetShah yes thanks its fine but in that case u select value A1,A2,A3 on each input type radio button that but in my project i have only one input type radio button and all data come in database.so in that case how can we do that .in here i have so many tr so we do that easliy but in my project all data come in databse so how can we do in that case — sneha, May 05 '21 at 12:48
i have only one tr in my actual project this.rowSelected(j)} value={this.state.checkbox} onChange={(e) => this.setState({ checkbox: !this.state.checkbox }) }/> — sneha, May 05 '21 at 12:49
{type.provis_file_stamp} {type.provis_file_hdrdt} {type.service_code} {type.provisioner_code} {type.provisioner_desc} — sneha, May 05 '21 at 12:50
@AjeetShah is it possible to do that in one tr?? to open different different URL on the basis of select radio button — sneha, May 05 '21 at 12:51
Your questions are changing every time we answer. See [this](https://meta.stackexchange.com/q/43478/329117). This is not the way to ask questions on StackOverflow. Always ask the original question. See [this](https://meta.stackexchange.com/q/66377/329117). If your problem is not a toy project (for learning), you should consider using a good library like https://www.npmjs.com/package/react-table. Also, read [this](https://meta.stackoverflow.com/q/261592/2873538) and [this](https://stackoverflow.com/help/how-to-ask). — Ajeet Shah, May 05 '21 at 12:54
yaa sure thanks @AjeetShah i have update my code .can u check and give me any idea and suggestion on that in above code — sneha, May 05 '21 at 13:23
@AjeetShah its very thankful to u give me some idea and suggestion in my above code.I am stuck on that part actually. — sneha, May 05 '21 at 13:28
Try https://codesandbox.io/s/react-example-forked-b399o?file=/index.js Don't fetch data from `https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e` everytime. Just fetch it once and use it further. — Ajeet Shah, May 05 '21 at 14:02
@AjeetShah thanks for ur great help but in code ur create this but is it possible to without create this const ,and fetch id in my api .const customerDetails = [ { id: 1, provis_file_stamp: "a", provis_file_hdrdt: "b", service_code: "c", provisioner_code: "d", provisioner_desc: "e" }, — sneha, May 05 '21 at 14:18
bcz i have so many data so every we cant create id manually right ?? @AjeetShah — sneha, May 05 '21 at 14:20
Yes, it is possible to render table data from API data but you can do it by yourself. https://stackoverflow.com/a/40594269/2873538 https://stackoverflow.com/q/44911012/2873538 — Ajeet Shah, May 05 '21 at 14:22
is it possible to can we connect in mail ?? so that i can share my file or can u help me out something bcz i m stuck on that @AjeetShah — sneha, May 05 '21 at 14:42

score 0 · Answer 1 · answered May 05 '21 at 12:16

0

what you are doing is, you are handling the data using single state variable.

take three separate variables for all your radio buttons

and handle them separately

answered May 05 '21 at 12:16

Sudarshan

702
6
24

how can we do that using variable seprately https://codesandbox.io/s/o8tu5?file=/index.js can u show me something in here – sneha May 05 '21 at 12:17

faramarz razmi · Answer 2 · 2021-05-05T12:31:05.727

you need some changes in checkbox value and input tags values and setstate,you can find the changes. below is the code that works:

import React from "react";
import ReactDOM from "react-dom";

class Test extends React.Component {
  constructor(props) {
    super();
    this.state = {
      data: [],
      checkbox: 0
    };
  }

  handleClick = () => {
    const apiUrl = "https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e";
    if (this.state.checkbox) {
      fetch(apiUrl)
        .then((response) => response.json())
        .then((data) => {
          this.setState({ data: data });
          console.log("This is your data", data);
          window.open("https://example.com", "_blank");
        });
    } else {
      alert("not load data!");
    }
  };

  render() {
    return (
      <div>
        <div
          className="table-employee"
          style={{ marginTop: "20px", border: " 1.5px solid darkgray" }}
        >
          <table className="table table-hover table-bordered table-sm">
            <thead>
              <tr>
                <th scope="col">Select</th>
                <th scope="col"> LOAD DATE</th>
                <th scope="col"> FILE DATE</th>
                <th scope="col"> SERVICE</th>
                <th scope="col"> PROVISIONER CODE </th>
                <th scope="col"> DESCRIPTION</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <input
                    value={this.state.checbox === 1 ? true : false}
                    onChange={(e) => this.setState({ checkbox: 1 })}
                    type="radio"
                    preventDefault
                    name="select"
                  />
                </td>

                <td>dfgrty</td>
                <td>fgfg</td>
                <td>fgfg</td>
                <td>erer</td>
                <td>uuio</td>
              </tr>
              <tr>
                <td>
                  <input
                    value={this.state.checbox === 2 ? true : false}
                    onChange={(e) => this.setState({ checkbox: 2 })}
                    type="radio"
                    preventDefault
                    name="select"
                  />
                </td>

                <td>dfgrty</td>
                <td>fgfg</td>
                <td>fgfg</td>
                <td>erer</td>
                <td>uuio</td>
              </tr>
              <tr>
                <td>
                  <input
                    value={this.state.checbox === 1 ? true : false}
                    onChange={(e) => this.setState({ checkbox: 3 })}
                    type="radio"
                    preventDefault
                    name="select"
                  />
                </td>

                <td>dfgrty</td>
                <td>fgfg</td>
                <td>fgfg</td>
                <td>erer</td>
                <td>uuio</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="btn-submit">
          <button
            className="btn btn-primary"
            style={{ marginRight: "30px" }}
            type="submit"
            onClick={this.handleClick}
          >
            submit
          </button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

// https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e
// http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_minute_arrow.png

which u posted in code i m run here but i m getting error check here https://codesandbox.io/s/o8tu5?file=/index.js — sneha, May 05 '21 at 12:28
I had used the star(**) mark to bold the changes, now I have edited the code and removed the marks, check it again. Now code is updated. — faramarz razmi, May 05 '21 at 12:32
thenks for help but i want to make when i select 1st row then click submit button then open url and again when i select 2st row then click submit button then open another url like that 3rd row. ist possible to do that — sneha, May 05 '21 at 12:35
actually i did not get what do you mean exactly, but if your concern is about blank! you can open the url thru window.open("https://example.com", "_blank"); in seperate tabs or in one tab by using window.open("https://example.com", "blank"); — faramarz razmi, May 05 '21 at 12:48
no i am trying to say that i have only one tr in my actual project means i have one input type radio button so how can we do that in one tr — sneha, May 05 '21 at 12:54

How to load data on button click using react

2 Answers2