Question 411227 in Html Question posted in
Some basic documentation can be found here.

Html – What is the type of component's children in React?

Until now, i was using the type any to refer the children of my components, but when I updated my deploy it says not accept any as a valid type, what type i should use on my Section component bellow?

import {  ReactElement, ReactNode } from "react"

const Section = ({children}:any): ReactElement => {
    return (
        <div className="flex flex-row relative w-screen h-136">
            {children}
        </div>
    )
}

export default Section

import { ReactElement } from "react";
import Section from "../Section";

const ContactMe = (): ReactElement => {
    return (
        <Section>
            <div className="w-full h-full bg-cyan-900">

            </div>
        </Section>
    )
}

export default ContactMe
Tags:

2

Answers


  1. 0

    Use ReactNode instead of any for typing children in your component.

    It covers everything React can render.

    Follow this code as an example:

    const Section = ({
  children
}: {
  children: ReactNode
}): ReactElement => {
  return (
    <div>{children}</div>
  );
};
    Login or Signup to reply.
  2. 0

    To improve the type safety and avoid using any for the children prop in your Section component, you should use ReactNode as it is the correct type for anything that can be rendered in a React component.

    Solution:

    import { ReactElement, ReactNode } from "react";

interface SectionProps {
  children: ReactNode;
}

const Section = ({ children }: SectionProps): ReactElement => {
  return (
    <div className="flex flex-row relative w-screen h-136">
      {children}
    </div>
  );
};

export default Section;

    Explanation:

    • ReactNode: A type that covers all possible values that can be rendered by React, such as JSX, strings, arrays, or fragments.
    • No any: ReactNode replaces any for better type safety and to avoid issues in deployments that disallow any.

    This should resolve the type issue you’re encountering in your deploy.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search