Typescript: confusion with accepting props in React functional component

Question

I'm learning how to use React-TypeScript, and I'm confused with how React.FC and generics work together.

So I have a couple of questions relating to the code below (a functional component returning a list item):

1.) Do you have to pass props as a generic? Or could you simply write

const TodoListItem: React.FC = (props) => {
//code
}

2.) How is it that todo is able to be destructured out of <TodoListItemProps> ?

3.) Why is a return type not defined? Shouldn't it be written as :

const TodoListItem: React.FC<TodoListItemProps> = ({todo}):TodoListItemProps

Full code here:

interface TodoListItemProps {
  todo: {
    text:string
    complete:boolean
  }
}

const TodoListItem: React.FC<TodoListItemProps> = ({todo}) => {
  return(
    <li>
      <label>
        {todo.text}
      </label>
    </li>
  )
}

Martin · Accepted Answer · 2020-12-08 06:32:51Z

You can define your function components two ways.

With only add the types to the function parameters:

const TodoListItem = ({ todo }: TodoListItemProps) => {
  return (
    // ...
  );
};

Or add it as a generic paramter to the FC type:

const TodoListItem: React.FC<TodoListItemProps> = ({ todo }) => {
  return(
    // ...
  );
};

If use use this component both will work just fine, but the FC type adds more to the component. If you inspect the react types you'll see that:

type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}

So from this you can see, that FC (or FunctionComponent) will infer the props for the component (from the generic parameter you provided, and extends it with the children prop), add a propTypes, contextTypes, defaultProps and displayName static field for the compnent. If you don't use these, the first approach is functional, but the FC type will give you more stuff to work with function components.

Collectives™ on Stack Overflow

Typescript: confusion with accepting props in React functional component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related