score:5
Accepted answer
the functioncomponent
type basically boils down to a function that receives props and returns a reactelement
:
(props: propswithchildren<p>, context?: any): reactelement | null;
so one option would be to type your non-arrow function accordingly:
function helloworld(): reactelement {
return (
<div>
hello
</div>
);
}
the other option (which integrates better with the rest of the ts react ecosystem) is to store your function in a named variable:
interface someprops {
somevalue: number
}
const helloworld: functioncomponent<someprops> = function helloworld({ somevalue }) {
return <div>hi {somevalue}</div>
}
overall though i would recommend that you just use arrow functions as they offer benefits especially when it comes to js scopes and the this
reference.
Source: stackoverflow.com
Related Query
- Is it possible to type a React function component with TypeScript without using arrow functions?
- How to use jest.spyOn with React function component using Typescript
- How to define an interface for React function component with defaultProps without throwing missing type error?
- Typescript throws an explicit function return type error when using Suspense with React Router
- React TypeScript using FC and passing to a function with additional params, type error?
- Using JS React component in TypeScript: JSX element type 'MyComponent' is not a constructor function for JSX elements
- How do you correctly use React.lazy() in Typescript to import a react component with a generic type parameter?
- Type annotation for React Higher Order Component using TypeScript
- Connecting a component with OwnProps using react redux and typescript in the .NET Core 2.0 reactredux template project
- Creating reusable Button Component with React and Typescript with not assignable type error
- Default function value in React component using Typescript
- How to test with jest and typescript with types a basic react function component
- How to type a Typescript React Component that accepts a Context with a super-set of properties
- How to properly declare type for React wrapper component (HOC) using Typescript
- Is it possible in React Typescript to use a component prop interface with another prop?
- Set type of state of React Component with TypeScript
- How to statically type a string property within a React component using Typescript
- How to type any param with React Typescript in Functional Component
- Type React component with ref? Typescript
- React Router difference between component with and without function
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- TypeScript compiler error with React Stateless Function component
- How to test a function inside React functional component using jest.spyOn with React Testing Library
- Typescript React component with function overload and generic params
- Withrouter Error using function component and typescript jsx.element' is not assignable to parameter of type routecomponentprops
- When passing a React functional Component as a parameter of a function, how should I declare the function parameter type with TS
- React with Typescript | Functional component | Type 'boolean' is not assignable to type 'ReactElement<any, any>'
- React function component prop default with TypeScript
- Object is of type unknown error when using Typescript with React
- React with typescript passing function as props using hooks
More Query from same tag
- state values is undefined intially even after being set
- React onClick custom function
- Dynamic values in material ui's makeStyles
- how to get input value with typescript(put request )
- Why does passing event handler to child component not work
- Calling React hook in a function
- page/static graphql query becomes empty after page navigation
- How do I override bootstrap's mark style?
- Promise.catch in redux middleware being invoked for unrelated reducer
- Read and write to Redux store from multiple pages of a Gatsby App
- How can I return only the set-State from my fetched json data?
- redux form dynamic categories
- How to set value in input field to empty by click on a button in react js?
- How can I automatically update my javascript file to import newly detected files?
- forEach and setState for an array
- Prepend String before Moment Timestamp
- React Router Redirect not working in Private Route
- window.location.href vs redirect utility of react-router-dom
- stylesheet for css not being implemented for next.js components
- Check every property with condition using every es6 for object
- Build version of react app giving wrong links to CSS and JS files
- What is the purpose of React Router?
- Material-UI List side by side React
- Unterminated JSX contents, closing div tag gives error for no reason
- Material UI Color Palette get hex code of auto generated shades
- Not able to use multiple animations - TailwindCSS
- react actions on child leads to re-render of parent
- ReactJS: How to redirect from one route to another in react-router after XHR?
- PrismJS with React : using babel-plugin-prismjs
- Looping through nested data and displaying object properties and values