Typescript is not recognize the React.FC children in as props

[mohamad-es]

🔎 Search Terms

"React.FC children", "not recognize children", "error for children in use of React.FC"

🕗 Version & Regression Information

• This changed between versions ______ and _______
• This changed in commit or PR _______
• This is the behavior in every version I tried, and I reviewed the FAQ for entries about _________
• I was unable to test this on prior versions because _______

⏯ Playground Link

No response

💻 Code

import { ArrowDown01Icon } from "hugeicons-react";
import { FC, RefObject } from "react";

type Props = {
  summary: string;
  dropdownRef: RefObject<HTMLDetailsElement>;
  className?: string;
};

const Dropdown: FC<Props> = (props) => {
  const { summary, dropdownRef, className, children } = props;
  return (
    <details className={`dropdown min-w-40 h-full ${className}`} ref={dropdownRef}>
      <summary className="btn bg-white justify-between shadow-none rounded-xl !h-11 border-gray-200 hover:bg-gray-100 w-full">
        {summary}
        <ArrowDown01Icon size={18} />
      </summary>
      <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] p-2 shadow w-full">
        <li onClick={() => dropdownRef.current?.removeAttribute("open")}>{children}</li>
      </ul>
    </details>
  );
};

export default Dropdown;

🙁 Actual behavior

React.FC has its own children property in props and doesn't need to add children in the type definition. but I'm getting an error about it.

error: Property 'children' does not exist on type 'Props'.ts(2339)

🙂 Expected behavior

the error must be gone and accept this behavior

Additional information about the issue

No response

[MartinJohns]

This is working correctly. The argument props is typed as Props, and Props does not have a children property.

You need to adjust your type accordingly. It's commonly done: type Props = PropsWithChildren<{ /* your props be here */ }>

[mohamad-es]

import { ArrowDown01Icon } from "hugeicons-react";
import { FC, RefObject } from "react";

type TDropdown = {
  summary: string;
  dropdownRef: RefObject<HTMLDetailsElement>;
  className?: string;
};

const Dropdown: FC<TDropdown> = ({ children, summary, dropdownRef, className }) => {
  return (
    <details className={`dropdown min-w-40 h-full ${className}`} ref={dropdownRef}>
      <summary className="btn bg-white justify-between shadow-none rounded-xl !h-11 border-gray-200 hover:bg-gray-100 w-full">
        {summary}
        <ArrowDown01Icon size={18} />
      </summary>
      <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] p-2 shadow w-full">
        <li onClick={() => dropdownRef.current?.removeAttribute("open")}>{children}</li>
      </ul>
    </details>
  );
};

export default Dropdown;

issue: when we assign FC to a component in react which means the react function component and react function component have their own children inside of the function and no need to write children again in the props or interfaces. but I'm getting an error from the typescript.

import { ArrowDown01Icon } from "hugeicons-react";
import { PropsWithChildren, RefObject } from "react";

type TDropdown = PropsWithChildren<{
  summary: string;
  dropdownRef: RefObject<HTMLDetailsElement>;
  className?: string;
}>;

const Dropdown = ({ summary, dropdownRef, className, children }: TDropdown) => {
  return (
    <details className={`dropdown min-w-40 h-full ${className}`} ref={dropdownRef}>
      <summary className="btn bg-white justify-between shadow-none rounded-xl !h-11 border-gray-200 hover:bg-gray-100 w-full">
        {summary}
        <ArrowDown01Icon size={18} />
      </summary>
      <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] p-2 shadow w-full">
        <li onClick={() => dropdownRef.current?.removeAttribute("open")}>{children}</li>
      </ul>
    </details>
  );
};

export default Dropdown;

I know this work I try to use the function component (FC) and work fine but I have a typescript error, how can I correct the type error.

[kaoths]

@mohamad-es try

type TDropdown = {
  summary: string;
  dropdownRef: RefObject<HTMLDetailsElement>;
  className?: string;
};
const Dropdown: FC<PropsWithChildren<TDropdown>> = ({ summary, dropdownRef, className, children }) => {
 // ...
}

Note that PropsWithChildren does not make children a required field. If children must be passed in, it may not give what you want.
And unless you're using React 19, you may wanna wrap your component with forwardRef as well.