React.JS - Passing Data Via Components From Child to Parent-CodePudding

I'm relatively new to React and JavaScript and I'm building a website but I'm having a bit of an issue with passing Data via components from child to parent.

So:

I have my App.js script which is used as a router with react-router-dom, but I would like to store a boolean value using the useState hook. This boolean value that I would like stored should be passed on from a component called Login. I have the script setup to pass that data however the boolean is only stored as long as the Login COmponent page is active and when it is not rendered the boolean store by the useState hook in the App.js script just goes to 'undefined'. I'm assuming that this is happening because the app.js page constantly re-loads and re-renders, so how could I store that value even when the login page is not being rendered?

This is the code setup to pass that data:

app.js

const [authValue, setAuthValue] = useState(false);

  const changeValue = (value) => {
    setAuthValue(value)
}

And where the Login is called:

<Route path='/signin' element={<Login changeValue={changeValue}value={authValue} />} />

const Login = ({changeValue, value}) => {
  const [isValid, setIsValid] = useState(true)

  changeValue(isValid)
}

CodePudding user response：

The useState hook in React is a solution for component-level state management in functional components.

So, the value of isValid is stored only in Login.js and can be passed as a props to its children components.

Of course, you can also pass some state (or values) from child to parent via functions passed from parent into the child, but this is not the way you should consider if you want to use a state in whole app.

If you need to have the state that should be persistent across the app components, even after one component was unmounted, you should consider global management solutions like React Context API, Redux or MobX similar libraries.

CodePudding user response：

Try putting the changeValue(isValid) into a useEffect() hook. So:

useEffect(() => {
    changeValue(isValid)
}