get a state from another component

Question

I have a Map component with a state.

const [userPickPos, setUserPickPos] = useState()

This state represents a marker's position on a map.

This Map component is returned in a page component. On this page I want to access this marker's position(the state of it) from the Map component. How can I do that?

Map:

const Map = (userPos) => {

  const [userPickPos, setUserPickPos] = useState() 
  const MapEvents = () => {
    useMapEvents({
      click(e) {
        const lat = e.latlng.lat;
        const lng = e.latlng.lng;

        setUserPickPos({lat: lat,lng: lng})
        console.log(userPickPos)
      },
    });
}


  const bounds = new LatLngBounds([81.505, -0.09], [50.773941, -84.12544])

    return (
    <>
        
            

            
        

        
        
        {userPickPos && 
          
            
              Your Pick.
            
          
        }
         
      
    
    );

}

All (page):

const All = () => {
    . // I need to use the state here
    .
    .
    return (
    
    )
}

user_19459384 · Answer

Edit:

State created in Parent Component and sent to Child Component

Map (Child):

const Map = ({userPickPos,setUserPickPos}) => {

  const MapEvents = () => {
    useMapEvents({
      click(e) {
        const lat = e.latlng.lat;
        const lng = e.latlng.lng;

        setUserPickPos({lat: lat,lng: lng});
        console.log(userPickPos)
      },
    });
}

All page (Parent)

import React from 'react';
const All = () => {

  const [userPickPos, setUserPickPos] = useState()
  


 return 
}

export default All;

State created in Child Component and used in Parent Component

Map (Child):

const Map = ({handleCallBack}) => {

  const [userPickPos, setUserPickPos] = useState() 
  const MapEvents = () => {
    useMapEvents({
      click(e) {
        const lat = e.latlng.lat;
        const lng = e.latlng.lng;
        setUserPickPos({lat: lat,lng: lng})
        props.handleCallBack(userPickPos)
        console.log(userPickPos)
      },
    });
}
.
.
.

All page (Parent)

const All = () => {
    
    const handleCallBack = (pos)=>{
        console.log(pos) 
    }

    return (
    
    )
}

That way you could use the state in both components.

user_13567807 · Answer

useCallBack func, if you want to get the value from child to parent, as you can see the below code

const Map = ({handleCallback}) => {

  const [userPickPos, setUserPickPos] = useState() 
  const MapEvents = () => {
    useMapEvents({
      click(e) {
        const lat = e.latlng.lat;
        const lng = e.latlng.lng;

        setUserPickPos({lat: lat,lng: lng});
        handleCallback(userPickPos)
        console.log(userPickPos)
      },
    });
}

All page

import React from 'react';

const All = () => {


  const handleCallback = (data) => {
    // here you will get the value
    console.log(data)
    // your login
  };


 return 
}

export default All;

get a state from another component

2 Answers

Edit:

State created in Parent Component and sent to Child Component

State created in Child Component and used in Parent Component