Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have a REACT-STATELESS-COMPONENT , in a project with TypeScript. It has an error, saying, that

Missing return type on function.eslint(@typescript-eslint/explicit-function-return-type)
I am not sure what it wants me to do. Here is my code:
import React, { Fragment} from 'react';
import IProp from 'dto/IProp';
export interface Props {
  prop?: IProp;
const Component = <T extends object>({ prop }: Props & T) => (
  <Fragment>
    {prop? (
      <Fragment>
        Some Component content..
      </Fragment>
    ) : null}
  </Fragment>
LicenseInfo.defaultProps: {};
export default Component;
Can you tell me what I need to do. I need to read about TS, but currently I don't get it at all. And I can't commit right now cause of this.
I'd recommend using the types provided by react; they'll include the return type. If you're on the version 16.8.0 or later of react, do this:
const Component: React.FunctionComponent<Props> = (props) => (
Or use the shorthand:
const Component: React.FC<Props> = (props) => (
Prior to 16.8, you'd instead do:
const Component: React.SFC<Props> = (props) => (
Where SFC stands for "stateless functional component". They changed the name, since function components are no longer necessarily stateless.
                This does not work for me:   const HeaderNotification: React.FunctionComponent<Props> = (props: Props) => {  I still recieve an error on the lambda function, since it's doesn't have an explicit return type.  Any way to fix that?      EDIT:  Only that that worked was: const HeaderNotification: React.FunctionComponent<Props> = (props: Props): JSX.Element  => { 
– user2079828
                Mar 11, 2019 at 20:47
                no need to explicitly type props argument as it's already typed in the <Props> generic so this will be just fine: const Component: React.FunctionComponent<Props> = (props) => (  Even better is to destructure the prop object: const Component: React.FunctionComponent<Props> = ({ prop }) => (
– dmudro
                Jan 13, 2020 at 17:15
                Maybe, your comment can be outdated, because there is a fresh discussion on this topic  Remove React.FC from Typescript template. They recommend to replace React.FC to JSX.Element.
– AntonAL
                Feb 5, 2021 at 16:18
                Typescript should be able to infer the return type for React components. It shouldn't be necessary.
– martisj
                May 19, 2021 at 21:23
For a function return type it goes after the arguments: 
({ prop }: Props & T): JSX.Element => {}
JSX.Element is what TypeScript will infer, it's a pretty safe bet.
If you're curious, you should be able to see what TypeScript infers as the return type by hovering over Component, this will show the entire signature.
                Thank you. This actually fixed my second component with defaultProps. A question just to clarify things. Why in the second component, where I had defaultProps the answer from below didn't work?? I mean what is different when you have defaultProps?
– user10104341
                Feb 21, 2019 at 19:48
                the only clear difference would be their respective type definitions, I'm guessing React.SFC doesn't include defaultProps in it's definition while JSX.Element does. What was the error message?
– Robbie Milejczak
                Feb 21, 2019 at 20:22
If you use @types/react you don't have to provide return types for React components. You can disable this rule for react components like this. Just add this to your .eslintrc.js:
  overrides: [
      files: ['*.jsx', '*.tsx'],
      rules: {
        '@typescript-eslint/explicit-module-boundary-types': ['off'],
This is how I usually declare a component using typescript:
import * as React from 'react';
type MyComponentProps = {
  myStringProp: String,
  myOtherStringProp: String
const MyComponent: React.FunctionComponent<MyComponentProps> = ({ myStringProp, myOtherStringProp }): JSX.Element => {
  return (
      <h1>This is My Component</h1>
export default MyComponent;
This rule aims to ensure that the values returned from functions are of the expected type.
The following patterns are considered warnings:
Problem :
// Should indicate that no value is returned (void)
function test() {
   return;
 // Should indicate that a number is returned
 var fn = function () {
   return 1;
 // Should indicate that a string is returned
 var arrowFn = () => 'test';
 class Test {
   // Should indicate that no value is returned (void)
   method() {
     return;
solution :
// No return value should be expected (void)
function test(): void {
  return;
// A return value of type number
 var fn = function (): number {
  return 1;
// A return value of type string
var arrowFn = (): string => 'test';
class Test {
  // No return value should be expected (void)
  method(): void {
    return;
Link : https://github.com/typescript-eslint/typescript-eslint/blob/v4.22.0/packages/eslint-plugin/docs/rules/explicit-function-return-type.md
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.