Adding required props to child react elements with typescript

Question

I want to define a parent element where I need to pass down some react elements as props. I want to add some requirements on the props to the child components but I can't get my typescript working exactly as intended. Here is a minimal example

import * as React from "react";

function JSXElementChild() {
  return <div>Child One</div>;
}

const ReactFCChild: React.FC<{ label: string }> = ({ label }) => {
  return <div>{label}</div>;
};

function Parent({
  children
}: {
  children: React.ReactElement<{ label: string }>[];
}) {
  return (
    <div>
      {children.map((child) => (
        <div key={child.props.label}>{child}</div>
      ))}
    </div>
  );
}

export default function App() {
  return <Parent children={[<JSXElementChild />, <ReactFCChild />]} />;
}

Parent component requires children as props and these children requires a label: string as props. Now the above does correct mark a typescript issue with ReactFCChild; Property 'label' is missing in type '{}' but required in type '{ label: string; }'.ts(2741). However JSXElementChild does not yield any issues. How to fix that?

captain-yossarian from Ukraine · Accepted Answer · 2020-12-14 19:52:29Z

0

Fully updated answer. Please keep in mind, you should explicitly type React.FC, and you should not use JSX for root component

import * as React from "react";


const JSXElementChild: React.FC = () => {
    return <div>Child One</div>;
}

const ReactFCChild: React.FC<{ label: string }> = ({ label }) => {
    return <div>{label}</div>;
};

function Parent({
    children
}: {
    children: React.ReactElement<{ label: string }>[];
}) {
    return (
        <div>
            {children.map((child) => (
                <div key={child.props.label}>{child}</div>
            ))}
        </div>
    );
}

function App() {
    return React.createElement(Parent, {
        children: [
            React.createElement(JSXElementChild, null), //  error
            React.createElement(ReactFCChild, { label: 'd' }) // no error
        ]
    });
}

function App2() {
    return React.createElement(Parent, {
        children: [
            /**
             * still error, because JSXElementChild don't expect {label: string}
             * If you add typings for JSXElementChild, error will disappear
             */
            React.createElement(JSXElementChild, { label: 'd' }), //error
            React.createElement(ReactFCChild, { label: 'd' }) // no error
        ]
    });
}

edited Dec 14, 2020 at 19:52

answered Nov 23, 2020 at 11:30

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

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

6 Comments

mr.bjerre Over a year ago

Yeah I realize that. That was on purpose - I'd expect typescript to automatically raise an issue when those props are not defined

captain-yossarian from Ukraine Over a year ago

Does my solution helped?

mr.bjerre Over a year ago

No - I want typescript to raise an issue on the JSXElementChild as I implemented it. Your "solution" is just a replica of ReactFCChild unfortunately.

captain-yossarian from Ukraine Over a year ago

You can try to type it with propTypes. Here github.com/typescript-cheatsheets/react/issues/…

captain-yossarian from Ukraine Over a year ago

This issue can be also useful github.com/microsoft/TypeScript/issues/21699

|

Collectives™ on Stack Overflow

Adding required props to child react elements with typescript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related