Skip to main content

​
Overview

The RouteForm component provides a user interface for entering latitude and longitude coordinates for both the origin (“from”) and destination (“to”) points. It manages the coordinate state and triggers the route finding process.

​
Props

​
onFind
function
required
Callback function invoked when the user clicks “Buscar ruta” (Find Route). Receives the form state containing from and to coordinates.

​
State

The component maintains the origin and destination coordinates in its internal state:
​
from
object
Origin coordinates object
​
from.lat
number
Latitude of the starting point. Default: -34.55931882107318
​
from.lng
number
Longitude of the starting point. Default: -58.456907455139174
​
to
object
Destination coordinates object
​
to.lat
number
Latitude of the destination. Default: -34.58049629262017
​
to.lng
number
Longitude of the destination. Default: -58.45130747926478
this.state = {
    from : { lat : -34.55931882107318 , lng : -58.456907455139174},
    to : { lat : -34.58049629262017 , lng : -58.45130747926478}
}

​
Methods

​
onChange

Updates the state when coordinate values change in the input fields.
​
id
string
required
The field identifier - either "from" or "to"
​
field
string
required
The coordinate property to update - either "lat" or "lng"
​
value
number
required
The new coordinate value
onChange(id, field, value){
    this.setState( prevState => {
        const newField = Object.assign({}, prevState[id], {[field]: value})
        return Object.assign({}, prevState, {[id]: newField})
    })
}
Flow:
  1. Takes the current state for the specified field (from or to)
  2. Creates a new object with the updated coordinate value
  3. Merges it back into the state immutably

​
Render Method

render(){
    return (
        <div>
            <LatLongFields 
                id="from" 
                title="Desde" 
                value={this.state.from}
                onChange={this.onChange} />
            <LatLongFields 
                id="to" 
                title="Hasta" 
                value={this.state.to}
                onChange={this.onChange} />
            <button onClick={() => this.props.onFind(this.state)}>
                Buscar ruta
            </button>
        </div>
    )
}
The component renders:
  1. LatLongFields for origin (“Desde” - From)
  2. LatLongFields for destination (“Hasta” - To)
  3. Button that triggers the route search

​
LatLongFields Integration

The component uses two instances of the LatLongFields component to handle coordinate input:
  • Each LatLongFields receives:
    • id: Identifies which field (“from” or “to”)
    • title: Display label (“Desde” or “Hasta”)
    • value: Current coordinate object
    • onChange: Handler function for value updates
The onChange handler is passed down and called by LatLongFields whenever the user modifies a coordinate value.

​
Usage Example

import RouterForm from './RouteForm';

function App() {
    const handleFindRoute = (routeData) => {
        console.log('Finding route:', routeData);
        // routeData structure:
        // {
        //   from: { lat: -34.559, lng: -58.456 },
        //   to: { lat: -34.580, lng: -58.451 }
        // }
        
        // Send to server or process...
    };
    
    return <RouterForm onFind={handleFindRoute} />;
}

​
Component Structure

RouteForm
├── LatLongFields (id="from", title="Desde")
│   ├── Lat input
│   └── Lng input
├── LatLongFields (id="to", title="Hasta")
│   ├── Lat input
│   └── Lng input
└── Button (Buscar ruta)

​
File Location

src/client/RouteForm.jsx

Build docs developers (and LLMs) love

Get started for freeTalk to us