react, set const component variable of a parent from a const component child

Question

I'm new to react and I have a question that maybe is simple but I couldnt figure it out yet.

I have a const component parent that calls a const component child, what I want is to pass values from the parent to the child, and if the values are edited in the child the parent has access to the edited value.

What I want is this, the following const component is the child, it just render a map and if you click it set the const selectedPosition with longitude and latitude, I want that the const component parent passes an intial value of longitude and latitude and everytime its edited in the child the parent get the value:

    import React from 'react'
    import {MapContainer, Marker,TileLayer,Popup, useMapEvents } from 'react-leaflet'
    import 'leaflet/dist/leaflet.css'   
    
    
    const MapView = () =>{
    
        const [initialPosition, setInitialPosition] = React.useState([0,0]);
        const [selectedPosition, setSelectedPosition] = React.useState([0,0]);
    
    
       
        
        const Markers = () => {
        
            const map = useMapEvents({
                click(e) {                                
                    setSelectedPosition([
                        e.latlng.lat,
                        e.latlng.lng
                    ]);              
                },            
            })
        
            return (
                selectedPosition ? 
                    <Marker           
                    key={selectedPosition[0]}
                    position={selectedPosition}
                    interactive={false} 
                    />
                : null
            )   
            
        }
    
        
    
        return <MapContainer center={selectedPosition || initialPosition} zoom={5}   
                             
                style={{height:"200px",width:"500px"}}>
            <TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
             ></TileLayer>
             <Markers />
        </MapContainer>
    }
    
    export default MapView

The const component parent is something like this:

    const Locations = () => {
    
    ....
    
    return (
      <MapView />
    )
    
    }

How could I achive this? Is this the correct way of doing this or should I use class components? Thanks!

Answer 1

In a react way,you are supposed hoist the props up to the parent component.Hope this will be helpful!

const MapView = ({selectedPosition,setSelectedPosition}) =>{

const Markers = () => {

    const map = useMapEvents({
        click(e) {                                
            setSelectedPosition([
                e.latlng.lat,
                e.latlng.lng
            ]);              
        },            
    })

    return (
        selectedPosition ? 
            <Marker           
            key={selectedPosition[0]}
            position={selectedPosition}
            interactive={false} 
            />
        : null
    )   
    
}



return <MapContainer center={selectedPosition} zoom={5}   
                     
        style={{height:"200px",width:"500px"}}>
    <TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
     ></TileLayer>
     <Markers />
</MapContainer>

}

const Locations = () => {
const [selectedPosition, setSelectedPosition] = React.useState([0,0]);

return (
  <MapView selectedPosition={selectedPosition} setSelectedPosition={setSelectedPosition} />
)

}

Answer 2

You can use useState in the parent and pass it down to the children.

Example:

Location (parent)

const Locations = () => {

const [myState, setMyState] = useState("something")

return (
  <MapView setMyState={setMyState}/>
)

MapView (children)

   const MapView = ({setMyState}) => {

    
     const handleClick = () => {
       setMyState("something else")
     }
    
     return (
       <button onClick={handleClick> click </button>
     )
}