Functional components are one of the ways to create a UI component in React. You can check another way to create a typescript react class component.

Functional components are stateless components that are similar to Functions in JavaScript.

Functional components are normal function that takes props and returns JSX Element.

It can be created in many ways in Typescript.

  • Normal functions with typed props
  • React.FunctionComponent or React.FC Interface

Functional components react typescript example

There are many we can create Functional Components in typescript. In the Typescript React Component, the Function takes the props object and returns JSX data.

Let’s create a props object of the type MessageProps.

interface MessageProps {
    message: string;
}

Also, Can use type in place of the interface.

type MessageProps {
    message: string;
}

Let’s see multiple ways to create Typescript functional components.

  • Normal Function with typed props arguments

Declare Normal Function with props parameters of the type above MessageProps(use type or interface).

Here is an example

import React, { FC } from 'react';

interface MessageProps {
    message: string;
}


function FunctionalComponent(props:MessageProps){
    return (
        <>
            <h1>Welcome {props.message}</h1>
        </>
    );
};

export default FunctionalComponent;

  • Normal Function with ES6 props destructuring assignment props object is declared with destructuring assignment syntax.

    You have full control over optional parameters.

    In the below, Component, MessageProps contains a message and an optional user.

    with destructuring syntax, you can pass the property names with optional parameters as seen below

  import React, { FC } from 'react';

interface MessageProps {
    message: string;
    user?: string
}


function FunctionalComponent({message,user="loggeduser"}:MessageProps){
    return (
        <>
            <h1>Welcome {message} - {user}</h1>
        </>
    );
};

export default FunctionalComponent;
  • use FunctionComponent or FC

Another way to create a functional component is to import the FunctionComponent or FC type.

The disadvantage of this approach is

  • Implicit type of children
  • Don’t support generics
  • default static properties such defaultProps are not typed

Here is a code using the React FC example.

import React, { FC } from 'react';

interface MessageProps {
    message: string;
}

const FunctionalComponent: FC<MessageProps> = ({ message }) => {
    return (
        <>
            <h1>Welcome {message}</h1>
        </>
    );
};

export default FunctionalComponent;

FC is an alias for FunctionComponent. Also, can be used in creating components.

Here is a code using the React FunctionComponent example.

import React, { FunctionComponent } from 'react';

interface MessageProps {
    message: string;
}

const FunctionalComponent21: FunctionComponent<MessageProps> = ({ message }) => {
    return (
        <>
            <h1>Welcome {message}</h1>
        </>
    );
};

export default FunctionalComponent21;

All the above functional components are called with the below syntax in other parent components.

      <FunctionalComponent message={"john"}></FunctionalComponent>

Typescript Functional Components features

  • Each component is similar to Normal Functions with typed props object
  • props data are accessed using this.props.counter
  • can also use hooks to manage component state
  • Functions can also be arrow functions