Typescript how to pass props in parent component

Question

I am practicing typescript. I have error "Type 'void' is not assignable to type 'boolean'" for setAuthenticated(valueFromChild) line and "...is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'." for all places(,) where I pass props into child components here. How do I fix the errors?

import { FunctionComponent, useState } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Navbar from './Components/navbar.component';
import './App.css';
import { ThemeProvider } from '@material-ui/core/styles';
import theme from './Theme/theme';
import Login from './Components/login.component';
import Register from './Components/register.component';

const App: FunctionComponent = () => {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
  const handleAuth = (valueFromChild: boolean): boolean =>
    setIsAuthenticated(valueFromChild);
  return (
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <Navbar isAuthenticated={isAuthenticated} />
        <Switch>
          <Route
            exact
            path="/login"
            render={(props) => <Login {...props} handleAuth={handleAuth} />}
          />
          <Route
            exact
            path="/register"
            render={(props) => <Register {...props} handleAuth={handleAuth} />}
          />
        </Switch>
      </BrowserRouter>
    </ThemeProvider>
  );
};

export default App;

Linda Paiste Linda Paiste · Accepted Answer · 2021-03-20T05:17:05

const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
const handleAuth = (valueFromChild: boolean): boolean =>
    setIsAuthenticated(valueFromChild);

You are saying that handleAuth must return boolean. But calling setIsAuthenticated returns void. You probably just want to make handleAuth return void. Or you can leave off the return type and let Typescript infer it correctly.

const handleAuth = (valueFromChild: boolean): void =>
    setIsAuthenticated(valueFromChild);

"...is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'." for all places(,) where I pass props into child components here.

It seems like your components Login and Register don't accept any props. Do they accept a handleAuth prop?

They should be defined similar to this:

export interface AuthProps {
  handleAuth: (value: boolean) => void;
}

export const Login: React.FunctionComponent<AuthProps> = ({handleAuth}) => { ...

export const Register: React.FunctionComponent<AuthProps> = ({handleAuth}) => { ...

The props that you are passing from (props) => are the RouteComponentProps which includes match, location, etc. You could include these in the props type for your Login and Register components. But if you don't need to use these props in the component then you can just not pass them.

render={() => <Login handleAuth={handleAuth} />}

Typescript how to pass props in parent component

1 Answers