CODEWITHSUNDEEP
reactjstypescriptreact-router-dom
user12738756
user12738756

Reputation: 119

Typescript how to pass props in parent component

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;

Upvotes: 4

Views: 819

Answers (1)

Linda Paiste
Linda Paiste

Reputation: 42298

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} />}

Upvotes: 2

Related Questions