Link to home
Start Free TrialLog in
Avatar of ocean O
ocean OFlag for United States of America

asked on

pass variable value from one component to another component in reactjs

I have a question about reactLeaflet.
in one file laControl.js, I had set a variable value in userEffect() block, I need pass this value to another component file showTitle.js. both two files are in the same folder.

Below are code:
 
laControl.js :
const { useEffect, useState, Fragment, useRef } = window.React;
const { useLeaflet } = window.ReactLeaflet;

export function tLayer({ link = ""}) {
  const { laContainer } = useLeaflet();

  const [la, setLa] = useState(null);
  useEffect(() => {
    const ti = la || Leaflet.tiLa(link);
    setLa(ti);
    laContainer.addLa(ti);
    const n = ti._url.includes("CovLOT"); // I got the value here, then I need pass this value to showTitle.js
    return () => laContainer.removeLa(ti);
  }, [link]);

  return null;
}

Open in new window


showTitle.js:

const { useState } = window.React;
const { useLeaflet } = window.ReactLeaflet;

export function LegeL() {
 
  return html`
    <div className="leaflet-bottom">
      <div className="leaflet-bar">
        Hello!   // I need based on the value of n in laControl.js to show or hide "Hello!".   
      </div>
    </div>
  `;
}

Open in new window



How can I pass the value of n from laControl.js to showTitle.js?

Any inputs will be appreciated.
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial