title: How to make open url on click on button in reactjs
body: <p>In my code I am trying to do when I select row and click on button then this url open <a href="http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_minute_arrow.png" rel="nofollow noreferrer">http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_minute_arrow.png</a>.</p>
  <p>But right now in my code when I select row and click on button then url is not open.</p>
  <p>How can we do that to open this url  when I select row and click button the open url <a href="http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_minute_arrow.png" rel="nofollow noreferrer">http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_minute_arrow.png</a>.</p>
  <p>My code here <a href="https://codesandbox.io/embed/react-example-forked-o8tu5?codemirror=1" rel="nofollow noreferrer">https://codesandbox.io/embed/react-example-forked-o8tu5?codemirror=1</a></p>
  <p>Anyone plz suggest any idea and help me out. I m stuck on that.</p>
  <pre><code>   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 = &quot;http://localhost:9090/PrvFileRpt/getPrvFileData&quot;;
          if (this.state.checkbox) {
            fetch(apiUrl)
              .then((response) =&gt; response.json())
              .then((data) =&gt; {
                this.setState({ data: data });
                console.log(&quot;This is your data&quot;, data);
                window.open(&quot;https://example.com&quot;, &quot;_blank&quot;);
              })
          } else {
            alert(&quot;Data not fetched!&quot;);
          }
          // console.log('click');
        }
  
      // handleClick(e) {
      //     e.preventDefault();
      //     console.log(&quot;The link was clicked&quot;);
      //   }
  
      // handleFile()
      // {
      //     //fetch birt report from here
      //     console.log(&quot;inside file  &quot;,this.state.rowDetails);
      // }
      rowSelected(j) {
    
         // e.preventDefault();
         
          console.log(j)
         
          const rownum=j;
           console.log(&quot;rownum=&quot;,rownum)
     
           console.log(this.props.customerDetails[rownum] )
          this.setState({rowDetails:this.props.customerDetails[rownum]}, () =&gt; {
          
          
      });
      }
     
      
      render()
      {
          return(
              &lt;div&gt;
                  &lt;div className=&quot;table-employee&quot; style={{ marginTop:&quot;20px&quot;,border:&quot; 1.5px solid darkgray&quot; }}&gt;
              &lt;table className=&quot;table table-hover table-bordered table-sm&quot;&gt;
              &lt;thead&gt;
              &lt;tr &gt;
              &lt;th scope=&quot;col&quot;&gt;Select&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt; LOAD DATE&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt; FILE DATE&lt;/th&gt;
                  &lt;th scope=&quot;col&quot;&gt; SERVICE&lt;/th&gt;
                  &lt;th scope=&quot;col&quot;&gt; PROVISIONER CODE &lt;/th&gt;
                  &lt;th scope=&quot;col&quot;&gt; DESCRIPTION&lt;/th&gt;
                  
                 
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                       {
                       this.props.customerDetails.map((type,j)=&gt;{
                          return(
   
                          &lt;tr&gt; 
                          &lt;td &gt;&lt;input type=&quot;radio&quot; preventDefault name=&quot;select&quot;  key={j}  onClick={(e) =&gt;this.rowSelected(j)} value={this.state.checkbox}
                      onChange={(e) =&gt;
                        this.setState({ checkbox: !this.state.checkbox })
                      }/&gt;&lt;/td&gt;
                           &lt;td&gt; {type.provis_file_stamp}&lt;/td&gt;
                            &lt;td&gt; {type.provis_file_hdrdt}&lt;/td&gt;
                            &lt;td&gt; {type.service_code}&lt;/td&gt;
                              &lt;td&gt;{type.provisioner_code}&lt;/td&gt;
                              &lt;td&gt;{type.provisioner_desc}&lt;/td&gt;   
                              
                              &lt;/tr&gt;
                          )
                       })
                           
                  }
  
              &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;/div&gt;
              &lt;div className=&quot;btn-submit&quot; &gt;
                              &lt;button className=&quot;btn btn-primary&quot; style={{marginRight:&quot;30px&quot;}}  type=&quot;submit&quot; onClick={this.handleClick}&gt;FILE&lt;/button&gt;
                                 
                          &lt;/div&gt;
              
      &lt;/div&gt;
          )
      }
  }
      
  export default ProvFileRptSearchResult;
  </code></pre>