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
– sneha, Commented May 5, 2021 at 12:18
@AjeetShah or plz can u show me something any other idea.its very thankful — sneha
– sneha, Commented May 5, 2021 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 codesandbox.io/s/o8tu5?file=/index.js its very thankful — sneha
– sneha, Commented May 5, 2021 at 12:25

Sudarshan · Accepted Answer · 2021-05-05 12:16:03Z

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 5, 2021 at 12:16

Sudarshan

8147 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sneha Over a year ago

how can we do that using variable seprately codesandbox.io/s/o8tu5?file=/index.js can u show me something in here

faramarz razmi · Accepted Answer · 2021-05-05 12:31:05Z

0

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

edited May 5, 2021 at 12:31

answered May 5, 2021 at 12:23

faramarz razmi

2791 silver badge7 bronze badges

5 Comments

sneha Over a year ago

which u posted in code i m run here but i m getting error check here codesandbox.io/s/o8tu5?file=/index.js

faramarz razmi Over a year ago

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.

sneha Over a year ago

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

faramarz razmi Over a year ago

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("example.com", "_blank"); in seperate tabs or in one tab by using window.open("example.com", "blank");

sneha Over a year ago

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

Collectives™ on Stack Overflow

How to load data on button click using react

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related