[Fix] Property ‘children’ does not exist on type ‘IntrinsicAttributes & Props’ ts(2322)

The error “Property ‘children’ does not exist on type ‘IntrinsicAttributes & Props’. ts(2322)” is an error that is invoked whenever you are coding in reactjs and using task or tags. Given below is the snippet of the error which you can find.

Type '{children: never[]; key: string; Index: string; Item: SomeItem[]; }' is not assignable to type 'IntrinsicAttributes & Props'. 
Property 'children' does not exist on type 'IntrinsicAttributes & Props'. ts(2322)

I would like to share with you the steps I took to fix the “Property ‘children’ does not exist on type ‘IntrinsicAttributes & Props’. ts(2322)” in your reactjs file.

Why “Property ‘children’ does not exist on type ‘IntrinsicAttributes & Props’ ts(2322)” Error is seen?

The error is seen because Task is not made out to receive children, but actually you may be passing a newline text node as the task’s children, which is causing the error, “Property ‘children’ does not exist on type ‘IntrinsicAttributes & Props’. ts(2322)”.

The error can also occur if the  Box component tries to access the children property on the props object, but has not defined a type for it in the BoxProps type alias.

The detailed solution to fix the error “Property ‘children’ does not exist on type ‘IntrinsicAttributes & Props’. ts(2322)”, is given below.

How to fix the error, “Property ‘children’ does not exist on type ‘IntrinsicAttributes & Props’ ts(2322)”?

To fix error, you will have to make the JSX tag self closing to ensure it has no children. To self close the JSX tag you will have to add appropriate code. If the error has risen due to a box tag try to type the children property as React.ReactNode to fix the error.

To fix the error, “False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`”, you will have to use one of the below mentioned methods depending upon the tag you are using.

Method 1: If You are Using Task

To fix the error, “False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`”, you will have to make the JSX tag self closing to ensure it has no children. To self close the JSX tag you will have to add the code given below.

  <Task
        key={index}
        Index={counter.toString()}
        Item={value}
      />

Method 2: If You are Using Box

To fix the error , “False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`”, you can try to to type the children property as React.ReactNode to fix the error. Follow the code given below to fix the error

import React from 'react';

type BoxProps = {
  name: string;
  country: string;
  children: React.ReactNode; // added type for children
};

const Box = (props: BoxProps) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <h1>{props.country}</h1>
      {props.children}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Box name="Ashwin Nair" country="India">
        <h1>Hello</h1>
        <h1>World</h1>
      </Box>
    </div>
  );
};

export default App;

Code Source: Stackoverflow

This should fix the error, “Property ‘children’ does not exist on type ‘IntrinsicAttributes & Props’. ts(2322)”

Conclusion

To fix the error “Property ‘children’ does not exist on type ‘IntrinsicAttributes & Props’. ts(2322)”, you will have to make the JSX tag self closing to ensure it has no children. To self close the JSX tag you will have to add appropriate code. If the error has risen due to a box tag try to type the children property as React.ReactNode to fix the error.