React SetState() not getting set

I am making an axios call to fetch certain data and store that data in a list called urls by updating the state , However when i click on any particular item from the list , that corresponding index should be fetched so that i can store it in a state and pass it to child component . Not sure how exactly to accomplish this .

constructor(props){
   super(props);
   this.state={
     urls:[],
     selectedUrl : ''
    }
  }
componentDidMount(){
axios.get(`http://localhost:8200/service/${this.service_name}`)
  .then(  response=> {
    console.log(response.data);
    this.setState({
      urls:response.data.urls
    })
  })
}

selectedUrlHandler(i){
   console.log('before clicked',i,this.state)
   this.setState((state)=>({
      selectedUrl:state.urls[i]
       }) , ()=>{ console.log(this.state.selectedUrl)});
   console.log('after clicked',i,this.state)
}

render(){
   return(
       {
            this.state.urls.map( (list,i) => {
              return(
                <tr key={index}>
                <td>
                    <Link to={{pathname:`/service/${this.service_name}/requests`, 
                                state:{url:this.state.selectedUrl}}} 
                                onClick={()=>this.selectedUrlHandler(i)}>{list}</Link>
                </td>
                </tr>
              );
            })
          }
    )
}

As above in the selectedUrlHandler i want to fetch the index of a particular item clicked and update the selectedUrl state .

As you can see from the screenshot , the console.log inside setState is not getting accessed at all.

What is <Link>? Is it from react-router-dom, because if so, it already has click handling logic, and you’re trying to override it, which kinda defeats the point of using <Link/> in the first place. I have no idea what adding your own custom click handler will do. But I’m suspecting at best, nothing at all, and at worst completely mess up how <Link/> is supposed to work.

Also, this doesn’t do what you think it does:

console.log('before clicked',i,this.state)
this.setState((state)=>({
  selectedUrl:state.urls[i]
}) , () => {
  console.log(this.state.selectedUrl)
});
console.log('after clicked',i,this.state)

setState is not synchronous, it won’t log before clicked then the state.selectedUrl then the after clicked. It’ll log before clicked and after clicked with the current state, then if the handler actually worked, once the state was set, log the new state’s selectedUrl field.

Yes Link is from react router dom , was not sure how to accomplish it without using onClick , If not to use onClick , any other way to accomplish the code written by me ?

Yes , first before clicked , then after clicked is displayed in console , but after that the setState part is not displayed at all , Not sure wat exactly is happening there .

Link is specifically for creating an HTML anchor element that a user can use to navigate through the app: it isn’t for doing arbitrary state changes. Why can you not just read the match.url property that react-router is going to give you, implicitly, for any component connected to the router, why do feel you need to duplicate the functionality and save it to the state of that component?

import {withRouter} from "react-router-dom"

const MyComponent = ({ match }) => withRouter(
  <div>
    <p>This is the currently matched URL: {match.url}</p>
  </div>
);

before clicked and after clicked will always display exactly the same thing (the current state before anything happened), it doesn’t matter if the setState works or not - that was what I was getting at