using reactjs how to make clickable button and open url

Question

what i am trying to do is in my code i have one table and when i select radio button in 1st row and click submit button then url link is open and load the data and show in console. but again when i select 2nd row radio button and click submit button then url is not open and not show data in console. and again i select 3rd row radio button then click submit button then im geeting data in console and open url like that means 1st i click one row then im geeting data and later i select another row then not get data

im try to do is but i am not to do that what is the issue in input radio button type.is ther any way to make state.checked is set to true always

anyone help me out this.

handleClick() {
        const apiUrl = "http://localhost:9090/PrvFileRpt/getPrvFileData";
        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');
      }

 <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>


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

Answer 1

You are trying to use a single state value(boolean) to maintain multiple components.

This is how the state changes when you make subsequent clicks.

• Before Click - undefined(assuming the initial value is a Falsy)
• First Click - true
• Second Click - false...

I'm assuming you are having problems with the second, fourth, sixth, and so on radio buttons.

I suggest:

• Maintaining separate state values of each radio buttons. That way they won't change each other's values.

   state = {
     checkbox: {
       radioButton1: false,
       radioButton1: false,
       radioButton1: false,
     }
   }

or

• Define your state as an object or an array

   state = { checkbox: [false, false, false] }

Usage:

   this.setState({ checkbox.radioButton1: !this.state.checkbox.radioButton1 })

   this.setState({ checkbox[n]: !this.state.checkbox[n] })