How to make open url on click on button in reactjs

Question

In my code I am trying to do when I select row and click on button then this url open http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_minute_arrow.png.

But right now in my code when I select row and click on button then url is not open.

How can we do that to open this url when I select row and click button the open url http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_minute_arrow.png.

My code here https://codesandbox.io/embed/react-example-forked-o8tu5?codemirror=1

Anyone plz suggest any idea and help me out. I m stuck on that.

   import React from 'react';
import axios from 'axios';
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 = "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');
      }

    // handleClick(e) {
    //     e.preventDefault();
    //     console.log("The link was clicked");
    //   }

    // handleFile()
    // {
    //     //fetch birt report from here
    //     console.log("inside file  ",this.state.rowDetails);
    // }
    rowSelected(j) {
  
       // e.preventDefault();
       
        console.log(j)
       
        const rownum=j;
         console.log("rownum=",rownum)
   
         console.log(this.props.customerDetails[rownum] )
        this.setState({rowDetails:this.props.customerDetails[rownum]}, () => {
        
        
    });
    }
   
    
    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>
        )
    }
}
    
export default ProvFileRptSearchResult;

Answer 1

Call the openInNewTab with the URL. It will open the URL in a new browser tab. Remove '_blank', if you want to open it in the same tab.

const openInNewTab = (url) => {
    const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
    if (newWindow) newWindow.opener = null
}

Answer 2

Well, if I understand correctly, you're trying to open a URL on button click?

If that's right, using window.open('https://example.com', '_blank') in your click handler will allow you to open any URL in a new tab.

Answer 3

First you need to find correct object using find method and then you can open url with window.open

Try following code:-

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 });
          const urlData = data.find(element => element.id === 3); // filter data with id
          window.open(urlData.url, '_blank'); // open url here
        });
    } else {
      alert("check the radio!");
    }
  };