ts(2322) 属性子项在类型“内在属性和道具”上不存在

Question

I'm getting the following error while trying to create a multimap with 'date' as the key and then iterate through the multimap which has arrays as it's values.

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)

and not sure how to fix this

   const History = () => {
   
  
   const [counter, setCounter] = useState(0);
   type SomeMap = Map<string,  SomeItem[]>;
   let map: SomeMap = new Map();

    //Items is of type SomeItem[]
    Items.foreach((item) =>{
      if(map.has(item.date)){
       (map.get(item.date) ?? []).push(item);
       } 
      else{
       map.set(item.date,[item]);
       }
      });

      return(
        <Accordian>
         { map.foreach((value, index) => {
           setCounter(counter +1 );
           <Task
            key={index}
            Index={counter.toString()}
            Item={value}>
           </Task>
         })}
        </Accordian>
     );
   
    };

    
   
    type Props = {
     index: string;
     Item: SomeItem[];
    };

    const Task = (props:Props) => {

     const index = props.Index;
     const Item = props.SomeItem;

     
     render(/*Some Code*/);
    };

Answer 1

Task is not typed to receive children , but actually you are actually passing a newline text node as the task's children.

      <Task
        key={index}
        Index={counter.toString()}
        Item={value}>{/* there is a new line text node here */}
      </Task>

You probably want to make the JSX tag self closing to ensure it has no children:

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

Playground

Answer 2

In my case, Im using Styled Components and Primereact libraries.

The issue throw me when I create Style componet inheriting to a Primereact component (TabView), to solve this problem I add children as Styled Component Prop:

import { TabView } from 'primereact/tabview';
import styled from 'styled-components';

type ChildrenProp = {
  children: React.ReactNode;
};

export const ChatTabView = styled(TabView)<ChildrenProp>`
    // css code
`;

Answer 3

I'ts because you have

<ParentComponent prop1 prop2>
   <div> With Child Components </div>
</ParentComponent>

In my case I leave alone my <ParentComponent prop1 prop2 /> and it works fine.