score:111
edit 2022: with react 18, fc no longer provides children, so you have to type it yourself, and you can drop fc:
import react, { reactnode } from "react";
interface props {
children?: reactnode
// any props that come into the component
}
const button1 = ({ children, ...props }: props) => (
<button {...props}>{children}</button>
);
yes you are missing a type for props as whole, which means typescript sees it as any
and your ts rules dont allow it.
you have to type your props as:
import react, { fc } from "react";
interface props {
// any props that come into the component
}
const button1: fc<props> = ({ children, ...props }) => (
<button {...props}>{children}</button>
);
score:1
this error can be fixed by explicitly defining type for the variable (children
in this case) and not leaving it to be implicitly inferred
error can be stopped altogether with typescript --noimplicitany
compiler option
score:6
you can use types as well
type buttonprops = {
children: reactnode;
}
const button = ({ children }: buttonprops) => (
<button>{children}</button>
);
score:6
i find it best to have the component props interface extend from react.htmlattributes
because it gives you the standard html attributes without any extra configuration:
interface button1props extends react.htmlattributes<element> {
// add any custom props, but don't have to specify `children`
}
const button1 = ({ children, ...props }: button1props) => (
<button {...props}>{children}</button>
)
if you want to enforce children
to be provided, you can make it required by redefining it in the props interface:
interface button1props extends react.htmlattributes<element> {
children: react.reactnode
// add any custom props, but don't have to specify `children`
}
const button1 = ({ children, ...props }: button1props) => (
<button {...props}>{children}</button>
)
score:12
as another approach, you can use the built-in generic type "react.propswithchildren" for children in props, taking those props accordingly. a very short code would look like this:
import react from "react";
import button from "./styles";
type mycomponentprops = react.propswithchildren<{}>;
export default function mycomponent({ children, ...other}: mycomponentprops) {
return <button {...other}>{children}</button>;
}
score:22
this was a major issue for me and i wasted a lot of time figuring out the correct solution. right now you have an error with the children prop but in the future, you might have this error for a lot of functions where you are destructuring the params. so i would suggest, follow this github issue.
const yourfunc = ({destructuredprops}: {destructuredprops: type}) => {}
score:24
you can also add the predefined type to your functional components like this:
const button1: react.fc<{}> = ({ children }) => (
<button>{children}</button>
);
by this way you don't have to repeat yourself to define children
props.
the fuller version could be like this:
interface props {
// any other props that come into the component, you don't have to explicitly define children.
}
const button: react.fc<props> = ({ children, ...props }) => {
return (
<button {...props}>{children}</button>
);
};
please note it works for react 16.8
Source: stackoverflow.com
Related Query
- How to fix Binding element 'children' implicitly has an 'any' type.ts(7031)?
- how fix Element implicitly has an 'any' type because expression of type 'string' can't be used to index type?
- Getting type error of Binding element children implicitly of any
- Binding element 'title' implicitly has an 'any' type
- binding element 'yyy' implicitly has an 'any' type error in typescript
- Binding element 'string' implicitly has an 'any' type
- Binding element 'dispatch' implicitly has an 'any' type. var dispatch: any
- Binding element 'x' implicitly has an 'any' type
- How do I fix the error "Element implicitly has an 'any' type because the expression of type
- How to fix redux-observable Parameter 'action$' implicitly has an 'any' type
- Graphql React Typescript error binding element 'currency' implicitly has an 'any' type
- Ionic ReactJS Binding element 'appProps' implicitly has an 'any' type. TS7031
- Binding element 'posts' implicitly has an 'any' type
- React: Binding element 'children' implicitly has an 'any' type
- React Typescript - Binding element 'C' implicitly has an 'any' type. TS7031
- Binding element 'input' implicitly has an 'any' type in redux form
- react typescript error - element implicitly has an any type because expression of type string cant be used to index type {}
- How to fix 'JSX element type 'Component' does not have any construct or call signatures' in ts
- Map typescript parameter: Binding element 'columns' implicitly has an 'any' type
- Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type
- error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist
- React navigation 5 error Binding element 'navigation' implicitly has an 'any' type.ts
- Binding element 'Component' implicitly has an 'any' type.ts
- How to correctly replace type any when returning children or map of children if array
- TypeScript (ReactJS) compiler error, this implicitly has type any
- How to only allow a specific element type as children using Flow and React?
- How to fix Element type is invalid: expected a string (for built-in components)?
- How to fix Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object
- How to fix the type error Type '(string | Element) [] is not assignable to type 'string | Element | undefined' using react and typescript?
- TS | Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Record<SecurityMode, boolean>'
More Query from same tag
- Import all imports from another js file
- React 404 not found
- Redux - relation of reducers to actions
- Pomodoro Clock (using React Hooks) countdown does not start
- Abstracting static HTML to React
- How to open react component in new tab without rendering the whole app component?
- How to pass state values from a component into another child component that contains param settings?
- Variable 'data' implicitly has type 'any[]'
- React component returns blank page on App.js
- (Universal React + redux + react-router) How to avoid re-fetching route data on initial browser load?
- function inside useEffect not getting called for deepLink
- Handling clearing a view component in React Or Vuejs
- Defining a Union Type from object values in Flow
- react router scroll to top when navigating to current page
- React upload file to laravel server error
- How to add Normalize CSS to Storybook?
- How to add a scrollbar to an element using react-bulma-components?
- TypeScript, undefined value to concrete
- React dropzone, how to upload image?
- onSnapshot not triggering in vercel for ReactJS project for Web Version 9
- is there an easier algorithm to solve this form problem?
- How to Hide elements on HTML when data comes NULL using React
- axios.delete() is giving 403 error ... however this works in POSTMAN, and axios.post method is working fine
- What is my serverSessionSecrect() function actually doing?
- Jest React - Test suite failed to run, Cannot find module 'react-dotenv'
- Materialize Slider in React class
- Antd form doesn't identify input values
- Sequelize Query FindAll doesn't filter
- Print the select value to console with onChange() similar to onSelect()
- Exporting asyc dependent, non-async const from JS module