What is correct way how to create functional component in react using typescript

Question

What is correct way how to create functional component in react using typescript ?

Should I use interface or type for props?
Should I use React.FC or React.FunctionComponent?
How can I validate props using eslint?

Right now, my typically components looks like:

interface IProps {
  color: string;
}

const Example = (props: IProps) => {
  const { color } = props;

  return (
    <>
      {color}
    </>
  );
};

I am not sure if it best way...

Also I dont know how to validate props usingeslint`, for example when I want to pass down color as a number..

Your code is almost there. You just need to change const Example = (props: IProps) => { to const Example: React.FC<IProps> = (props) => {. In addition, your interface is fine! — wentjun
– wentjun, Commented May 3, 2020 at 15:13

gqstav · Accepted Answer · 2020-05-03 15:05:32Z

4

Both are used frequently in the community. I prefer type as I find it easier to use, but you can read here https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#3.10 and make your own opinion.
React.FC is shorthand for React.FunctionComponent
props will be validated by the TypeScript static analysis.

I found this pattern helpful when starting with function components:

type Props {
  color: string;
}

const Example: React.FC<Props> = ({color}: Props) => {

  return (
    <>
      {color}
    </>
  );
};

answered May 3, 2020 at 15:05

gqstav

2,0921 gold badge15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

masiyik879 Over a year ago

Thank you, is there any option how to run only TypeScript static analysis from command line? I would like to run it before commit after eslint check. Or do you mean TSLINT?

gqstav Over a year ago

If you bootstrap your project with npx create-react-app my-app --template typescript it'll already be there for you by default and if you break the rules of TypeScript it'll complain while running npm start. For running it from command line, see e.g. here stackoverflow.com/questions/33535879/…

AmerllicA · Accepted Answer · 2021-01-07 15:45:16Z

-1

By the Maximilian Schwarzmüller guides the best approach is:

import React from 'react';
import type { FC } from  'react';

interface SampleProps {
  color: string;
}

const Sample: FC<SampleProps> = ({ color }) => {
  return (
    <>
      {color}
    </>
  );
};

answered Jan 7, 2021 at 15:45

AmerllicA

33.2k18 gold badges146 silver badges170 bronze badges

Collectives™ on Stack Overflow

What is correct way how to create functional component in react using typescript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related