React typescript and children

Question

I try to dynamically check in typescript the types of react children components. The following code is working pretty well, however seems typescript does not want me to destructure children.

I get the Typescript error :

TS2339: Property 'type' does not exist on type 'ReactNode'.

What can i do t get rid of the typescript error instead of using // @ts-ignore.

import * as React from 'react';

    export interface AuxProps  { 
      children: React.ReactNode[]
    }

    export const Message: React.FC<AuxProps> = ({
      children,
    }: AuxProps) => {
      
      const test = children.filter(({ type }) => type === Test);

      return (
        <div>
          {test}
        <div/>
      );
    };

Domino987 · Accepted Answer · 2020-08-06 19:31:12Z

1

This is because the default ReactNode does not have the field type.

You can simply add that key by using the & functionality:

export interface AuxProps  { 
      children: (React.ReactNode & {type: string})[]
    }

This will add the type to the elements.

answered Aug 6, 2020 at 19:31

Domino987

8,8642 gold badges17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3511021 Over a year ago

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {    type: T;     props: P;     key: Key | null; }

so actually it should be there already or not?

Domino987 Over a year ago

Great, can you accept the answer if that fixes your problem. This is because it could be both and only the second has the type and not the first one. So only one half has it and it can be, that the Node does not have it. IF you use the ReactChild insteda, that should work

Karol Majewski · Accepted Answer · 2020-08-06 19:56:52Z

1

You can't read type from ReactChild, because ReactChild is a union and not every member of that union has a property called type.

In fact, only ReactElements do.

The solution is to check for two things inside your predicate function:

Is this child a ReactElement?
If yes, then is that element of the desired type?

Code:

const test = children.filter(child => React.isValidElement(child) && child.type === 'Test');

answered Aug 6, 2020 at 19:56

Karol Majewski

26.2k9 gold badges53 silver badges57 bronze badges

Collectives™ on Stack Overflow

React typescript and children

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related