React.js: Property ‘children’ does not exist on type ‘#’

This article will give you more details about the error Property ‘children’ does not exist on type ‘#’ in React.js and some ways to fix it, for example, using PropsWithChildren or adding type for children property.

The cause of the error “Property ‘children’ does not exist on type ‘#'” in React.js

The core of React is components. You can nest components together like HTML tags, which makes JSX look like HTML. And components or content nested within components is called children. 

We can change children. It is possible to pass unique props to children, make them visible or invisible, and change them depending on our purposes.

First, let’s get to the cause of this error and what the warning says. We cannot access the property “children” like in the example below.

Code:

type Child = {
  id: Number,
  fullName: string,
};
const Parent = (props: Child) => {
  return (
    <>
      <h2>
        React.js: Property 'children' does not exist on type '#' |  LearnShareIT
      </h2>
      <p>
        Id: {props.id}
        <br />
        Name: {props.fullName}
      </p>
 
      {props.children}
    </>
  );
};

Output:

Typescript error: Property 'children' does not exist on type 'IntrinsicAttributes & Child's 

So how can we fix and prevent the above code from showing the above error? Let’s see some solutions.

How to fix the error “Property ‘children’ does not exist on type ‘#'” in React.js?

Adding type for children’s property

This way, we will add the property “children” to the child component and the type. We will resolve the error according to what the warning suggested.

Code:

type Child = {
  id: Number,
  fullName: string,
  children: React.ReactNode;
};

This way, you have added a key-value pair containing the type of the element, like the example here is ReactNote, and the program will generally run without any warnings. In the child component, you can already access props. Children and the parent component can set the value for children.

Using PropsWithChildren method

In this way, we will use a built-in method in React 18, PropsWithChildren, to define the child component that needs to pass props. Check out the example below.

Code:

import { PropsWithChildren } from 'react';
interface Child {
  id: Number,
  fullName: string,
}
export const Parent: React.FC<PropsWithChildren<Child>> = ({ children,name }) => {
}

This way, we can pass children without defining them in the child component type. So we could fix the error. Hope the above steps are helpful to you.

Summary

To summarize, we have explained the error “Property ‘children’ does not exist on type ‘#'” in React.js. However, we recommend adding property children along with the element’s type to fix it.

Maybe you are interested:

• This JSX tag’s ‘children’ prop expects single child of type ‘Element’, but multiple children were provided – How to fix this error?
• Property does not exist on type ‘JSX.IntrinsicElements’
• Property ‘value’ does not exist on type HTMLElement

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs