Why isn't state being passed to child components?

Question

I'm trying to set authentication state depending on an HTTP response body. However, I am unable to pass isAuth's state to app()'s child components. Each time I call setIsAuth() from SignIn.js I receive a: TypeError: setIsAuth is not a function. What am I doing wrong?

app.js

function App() {
    const [isAuth, setIsAuth] = useState(false);

    return (
      <Router>
        <Switch>
          <Route path = "/signin" component={SignInPage} setIsAuth={setIsAuth} isAuth={isAuth} exact/>
        </Switch>
      </Router>
    );
}

export default App;

SignInPage.js

const SignInPage = ({setIsAuth}) => {
  return (
    <SignIn setIsAuth={setIsAuth}></SignIn>
  );
};

export default SignInPage;

SignIn.js

const SignIn = ({setIsAuth}) => {

  const {handleSubmit} = useForm({});

  const onSubmit => {
    setIsAuth(true)
  }

  return (
    <SomeComponent onClick={handleSubmit(onSubmit)}/>
  )
}

export default SignIn

you need to pass both value and the function to each component. Or You can use Context API or Redux or you can write/read from local storage. the Latter choices are more convenient with the authentication concept — ilkerkaran, Dec 07 '21 at 17:03
What is `adminPage` in `setIsAuth={adminPage}`? Didn't you want to pass `setIsAuth={setIsAuth}`? — Zsolt Meszaros, Dec 07 '21 at 17:04

score 2 · Accepted Answer · answered Dec 07 '21 at 17:14

Route component only accepts props that are defined in react-router-dom. If you want to pass props to the component you are rendering, You should pass them directly or you can use context. To pass props that you want, you should use render prop instead of component prop. So this code changes:

<Route path = "/signin" component={SignInPage} setIsAuth={setIsAuth} isAuth={isAuth} exact/>

to this:

<Route path = "/signin" render={() => <SignInPage setIsAuth={setIsAuth} isAuth={isAuth} />} exact/>

Although this should work, it's better to use context in these cases, especially if you want to pass these props to several other components.

Why isn't state being passed to child components?

1 Answers1