I am using React + TypeScript. I have a scenario where I have to pass a React.SFC ponent to another ponent. Which I am doing like this:

Container.tsx

import ChildComp from './ChildComp';
<ParentComponent CustomComp={ ChildComp } someArray={ [1, 2] } />

Now the issue is, I want to iterate this ChildComp ponent with someArray value, inside ParentComponent.

This child Component has it's own prop someValue, and I have added types to it, like what this child ponent can accept, and I am passing this prop while iterating it inside Parent.

ParentComponent.tsx

const content = someArray.map((value, index) => (
  <CustomComp someValue={ value } key={ index } />
));
{ content }

But I am getting error, that TS2339: Property 'someValue' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

Although, if I directly use above iteration in Container.tsx where I am importing it, it works fine. But not working if I am passing it to another ponent. Am I missing something here?

Note: Since the same iteration is working on Container.tsx, I am passing the iterated content to ParentComponent and rendering it like a variable:

{ CustomComp }

This works, but I want to know why the other solution did not work.

More details

ChildComp.tsx

type Props = {
   someValue: number,
};

const ChildComp: React.SFC<Props> = ({ someValue }) => {
   return (
      // Content
      { someValue }
   )
}

Type of CustomComp, in ParentComponent:

type Props = {
   CustomComp?: React.ReactNode | null
};

Before it was React.ComponentType, but I was getting error, so I changed it ReactNode, since I am directly passing content now.

I am using React + TypeScript. I have a scenario where I have to pass a React.SFC ponent to another ponent. Which I am doing like this:

Container.tsx

import ChildComp from './ChildComp';
<ParentComponent CustomComp={ ChildComp } someArray={ [1, 2] } />

Now the issue is, I want to iterate this ChildComp ponent with someArray value, inside ParentComponent.

This child Component has it's own prop someValue, and I have added types to it, like what this child ponent can accept, and I am passing this prop while iterating it inside Parent.

ParentComponent.tsx

const content = someArray.map((value, index) => (
  <CustomComp someValue={ value } key={ index } />
));
{ content }

But I am getting error, that TS2339: Property 'someValue' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

Although, if I directly use above iteration in Container.tsx where I am importing it, it works fine. But not working if I am passing it to another ponent. Am I missing something here?

Note: Since the same iteration is working on Container.tsx, I am passing the iterated content to ParentComponent and rendering it like a variable:

{ CustomComp }

This works, but I want to know why the other solution did not work.

More details

ChildComp.tsx

type Props = {
   someValue: number,
};

const ChildComp: React.SFC<Props> = ({ someValue }) => {
   return (
      // Content
      { someValue }
   )
}

Type of CustomComp, in ParentComponent:

type Props = {
   CustomComp?: React.ReactNode | null
};

Before it was React.ComponentType, but I was getting error, so I changed it ReactNode, since I am directly passing content now.

• javascript
• reactjs
• typescript
• react-props
• react-ponent

1 Answer 1

CustomComp prop isn't typed properly. It accepts a ponent (CustomComp={ ChildComp }), not an element (CustomComp={ <ChildComp /> }). In this case it would be not React.ReactNode but React.ComponentType.

It's also not random ponent but specific ponent that accepts someValue prop. ParentComponent props likely should be typed as:

type ParentCompProps = {
   CustomComp: React.ComponentType<ChildCompProps>,
   someArray: number[]
};