Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Placeholder in TextInput does not accept a react node usign typescript
See original GitHub issueUsing typescript if you add a react node in the placeholder field you get this error:
TS2322: Type 'Element' is not assignable to type 'string | ({} & string) | (ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & string) | (ReactNodeArray & string) | (ReactPortal & string)'.
Type 'Element' is not assignable to type 'ReactPortal & string'.
Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.
It seems there are some problems about typings in the placeholder field.
Expected Behavior
No compiler error
Actual Behavior
This compiler error:
TS2322: Type 'Element' is not assignable to type 'string | ({} & string) | (ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> & string) | (ReactNodeArray & string) | (ReactPortal & string)'.
Type 'Element' is not assignable to type 'ReactPortal & string'.
Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.
Steps to Reproduce
Just try this:
<TextInput size="small" name="parcelWidth" placeholder={<Text>Foo</Text>} />
Your Environment
- Grommet version: 2.7.1 with typescript v3.4.5
Issue Analytics
- State:
- Created 4 years ago
- Comments:8 (1 by maintainers)
Top Results From Across the Web
Do I have to declare placeholder on my reusable input in ...
You have to be explicit when declaring the types. Spreading the props {...rest} doesn't resolve the types for the custom Input component.
Read more >Composing React Components with TypeScript
For our Input component, we need the following props : defaultValue , onChange , placeholder and name . Each of them is a...
Read more >Deciphering TypeScript's React errors | by Fiona Hopkins
Object literal may only specify known properties, and 'placeholder' does not exist in type 'CustomInputProps'. Type '{ fieldName: string; ...
Read more >Thinking in React
React is, in our opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us...
Read more >Input
When Input dynamic add or remove prefix/suffix/showCount will make React recreate the dom structure and new input will be not focused. You can...
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
@ShimiSun this problem was not solved https://codesandbox.io/s/grommet-ts-v8lyz
ok, I opened it right now: #3193