How to pass props to a custom component in TypeScript
See original GitHub issueAccording to the docs I can create my own component and use it like this:
toast(<Msg />)
But when I create the component just like the docs suggest:
const Msg = ({ closeToast, toastProps }) => (
<div>...</div>
)
I get the (pretty obvious) error:
TS2739: Type ‘{}’ is missing the following properties from type ‘{ closeToast: any; toastProps: any; }’: closeToast, toastProps
I can get it working by using the
toast(Msg)
form, but how do I pass anything (like the actual text I want to show) to the component in such case?
Maybe I am missing something essential here, thanks for any help!
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Passing props in React using Typescript - DEV Community
There's one more scenario I'd like to talk about, and that is what to do when you need to pass down that same...
Read more >React with Typescript by example, Passing Props to Children.
The children prop is a unique prop that helps us with containment of components. It allows a component to pass its nested JSX...
Read more >How to pass a React component as a prop in TypeScript
To do this, you just need to add an open and closing carats (more than and less than symbols <> ) and then...
Read more >Passing custom props to styled-component in typescript
Have a look in the Styled Components docs for Typescript - Using custom props import React, { useState } from "react"; import styled...
Read more >Props With React Typescript Passing Props to Components
how to pass props from one component to another component in react typescript ? in this video we will cover this in detail.one...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@fkhadra Yes, great, thank you!
For future readers (I noticed the CodeSandbox examples disappear after some time): Declaring the component props using the Partial utility type helps:
I thought of such a workaround too. But I want to be able to use the
toastProps
in my component too, for example to read thetoastProps.type
and style the component accordingly. I don’t see a way to achieve that in such a workaround though.