How to dynamicallly pass the routing coordinates to leaflet-routing using react hooks

Question

I am trying to create an app that will take source and destination location from the autocomplete box and the map shows the route between the two points:

I have used the two useState to store the value for Source and Destination. After that, I am passing those two values as props to my Routing component. But the problem is that in my Routing component I am receiving the props data for destination as 'undefined'.

Please find my sandbox code here.

Note: In above code for now I have directly set the coordinates for Destination.

I am not able to figure out why it is behaving this way. Is there a way to achieve this?

Answer 1

You have a typo in the prop you are passing in App component and the prop you are receiving in Routing.

You are passing desitinationCity prop while you are expecting destinationCity prop so therefore it is always undefined.

Demo