Passing props in React Typescript using custom hooks

Question

I have made a custom useToggler hook, and i am trying to pass toggle props from it to button child in Header. When i try toggle={toggle} i get error:

Type '{toggle: () => void;}' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.

How can i achieve that with typescript?

import './style/app.css';
import Header from './components/Header';
import SideDrawer from './components/SideDrawer'
import Backdrop from'./components/Backdrop'
import useToggler from "./components/UseToggler";

const App = () => {
    const [show, toggle]=useToggler()

    return (
        <div className="App">
            <Header toggle={toggle} />
            <SideDrawer/>
            <Backdrop/>
            <main style={{marginTop:'56px'}}>
                <p>Page content</p>
            </main>
        </div>
    );
}

export default App;

Muhammad Zeeshan Muhammad Zeeshan · Accepted Answer · 2020-02-19T16:49:30

You'll get a similar error, since you're violating the interface typecheck. The Component should have a mandatory prop. You can avoid this error by spreading the props you want to pass as:

<Header {...toggler} />

Passing props in React Typescript using custom hooks

1 Answers