How to Pass React Children With TypeScript The Right Way -2022

Curious about React Children typescript? What exactly props are in react, the types of react and so on? So, Let’s get started with the basics.

What is React?

React is a JavaScript toolkit for creating dynamic and fast user interfaces for web and mobile apps. It’s a component-based, open-source front-end library that’s just responsible for the application’s view layer.

The view layer is in charge of the app’s overall feel and appearance. To have a better knowledge of how React children type works, the Instagram webpage, for example, was constructed entirely in React.

React separates the user interface into numerous components, making it easier to troubleshoot the code. Each component has its own attribute and function in this fashion.

If you’ve written React earlier, you’ve probably dealt with props and children in some manner. Since props children might have one, many, or no child elements, its value can be a single child node, an array of child nodes, or undefined, depending on the case. We can simply deal with props.children using the React.Children API without having to consider all of its various kinds.

ReactJS has mainly two types of react components. They are-

Functional Components
Class Components

How can we use React Components to build Children Props?

1. Using the Function Component

type Props = {
  title: string,
};
const Page: React.FC<Props> = ({
  title,
  children,
}) => (
  <div>
    <h1>{title}</h1>
    {children}
  </div>
);

The first react type is FC, which stands for Function Component. It is the standard react children typescript used on arrow function components.

Function component is a type of component in React that simply has a render method and doesn’t have its own state. They’re just JavaScript functions that accept data as parameters or don’t. We can write a function that accepts props(properties) as an argument and returns the displayed result.

Let us take a look at an example:

We gave in a Props children type alias holding a title prop in the example given. An interface might also be used to specify Props. It is important to remember that children aren’t specified in Props, hence, it’s included in the FC type.

Explicitly defining the react children prop type

We have numerous alternatives for the type of the react typescript props children if we specifically describe it. Let’s take a look at each one individually.

Using JSX.Element

type Props = {
  title: string,
  children: JSX.Element,};
const Page = ({ title, children }: Props) => (
  <div>
    <h1>{title}</h1>
    {children}
  </div>
);

At this time, children is essential. We placed a question mark (?) before the type annotation to make it optional for the component’s consumer.

type Props = {
  title: string;
  children?: JSX.Element;};

If the child must be a single React element, JSX.Element is an excellent choice. It does not, however, allow for numerous children. As a result, we may make the following change:

type Props = {
  title: string;
  children?: JSX.Element | JSX.Element[];};

Using ReactChild

type Props = {
  title: string;
  children:  
  | JSX.Element   
  | JSX.Element[]   
  | string   
  | string[];
};

Strings are not allowed in JSX.Element, which is a disadvantage. As a result, we may include strings in the union type:

But the question arises, what about the numbers?

Thankfully, ReactChild is a standard type that includes React components, strings, and numbers. As a result, we might broaden the type for kids as follows:

type Props = {
  title: string;
  children?:    
   | React.ReactChild 
   | React.ReactChild[];
};

Using ReactNode

type Props = {
  title: string;
  children?: React.ReactNode;};

React.ReactChild | React.ReactChild[] provides the range of values we want, however it is a bit verbose. A more concise solution is ReactNode.

Multiple elements, strings, integers, fragments, portals, and so on are all supported by ReactNode. Under the hood, the FC generic type also leverages ReactNode.

In addition to that, a pointer to remember, the react children only prop is already typed if we use function components with the FC type. However, when the children prop is explicitly typed, the ReactNode is usually the best option.

2. Using Class components

type Props = {
  title: string,
};
export class Page extends React.Component<Props> {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        {this.props.children}
      </div>
    );
  }
}

The second react type is the class component. The complexity of class components is higher than that of functional components. It necessitates extending React fc. Create a render method that returns a React fc element for the component.

Data can be passed from one class component to another. You may make a class by extending Component and adding a render method to it.

The children prop is automatically included in the Component type, just like it is in FC.

When we hover your cursor on the children’s prop, we can see what type it was given:

As a result, the children parameter in a class component is also ReactNode.

To sum up

It’s crucial to master react typescript props children if you want to become a great developer and start using the React component model to its full potential. One of React’s most helpful features is props.children, which allows us to render child components. As a result, every developer should know how to correctly use it.

I hope you found this post useful in learning how to use React children. For further clarifications and assistance, contact us at Deliverable.

How to Pass React Children With TypeScript The Right Way -2022