Search code examples
reactjsfluentui-reactpowerapps-modeldriven

How can I update the parent state in React from a child funcional componet?

I need bind states between two components (a navbar an a map). Both components are receiving data from index state via props.

How can I update index state in navbar component in order to update map component?

In index.ts init

this.state: { routes: {geojson_routes}, loadaded: false }

In navbar.tsx

const [routes, setRoutes] = React.useState(props.routes)
const [loaded, setLoaled] = React.useState(props.loaded)

const showRoute= () => {
    setLoaled(true)
}

In map.tsx

if(props.loaded == true) show = geojason(props)

I guess what I need is when showRoute is call from navbar, update loaded value from index.ts... But I don't know how ¬¬'

Solution

  • You can pass a function that sets the loaded state to true to the Navbar component as a prop. Then, when you want to set loaded to true, call the function from the navbar component.