React children with typescript

Question

I am having trouble with setting proper types for react children.

export const recursiveCloneChildren = (
  children: React.ReactNode,
  handleChildChange,
  disableContent: boolean,
) => {
  return React.Children.map(children, (child) => {
    if (!isObject(child)) {
      return child;
    }

    let childProps = {
      ...child.props,
      disabled: child.props.disabled || disableContent,
    };

    const requiredOrValidatableChildProps = {
      ...childProps,
      checkValidationState: handleChildChange,
    };

    if (child.props.required || child.props.validatable) {
      childProps = {
        ...requiredOrValidatableChildProps,
      };
    }

    if (child.props.children) {
      childProps.children = recursiveCloneChildren(child.props.children, handleChildChange, disableContent);
    }

    return React.cloneElement(child, childProps);
  });
};

I am getting this error

Property 'props' does not exist on type '{} | ReactElement<any, string | JSXElementConstructor> | ReactNodeArray | ReactPortal'.
Property 'props' does not exist on type '{}'.

I tried to set types for child directly ( React.ReactChild ), and showed another error on children. How can it be solved?

What is ` React.Children.map` ? Did you mean children.map(child => {return something..]) — Sanish Joseph
– Sanish Joseph, Commented Sep 24, 2021 at 20:23
Normally you just pass children through to be rendered like {children} which is typed as React.ReactNode. This component is very non idiomatic. What does this component do? How is it used? — Alex Wayne
– Alex Wayne, Commented Sep 24, 2021 at 20:29
@SanishJoseph, reactjs.org/docs/react-api.html#reactchildrenmap — paolostyle
– paolostyle, Commented Sep 25, 2021 at 0:01
@AlexWayne it's just not a component, it's a helper function. — paolostyle
– paolostyle, Commented Sep 25, 2021 at 0:03
I am recursively cloning children inside a Form component, which will handle Form validation and child validation. — Norayr Ghukasyan
– Norayr Ghukasyan, Commented Sep 25, 2021 at 13:05

paolostyle · Accepted Answer · 2021-09-24 23:47:04Z

I don't really like what you're trying to do, because if I found it in a codebase I'd be really confused.

But to answer your question. The child argument in the function passed to Children.map is of type ReactNode. This is the most general type, meaning you can end up with pretty much anything that can be a valid child. I actually don't know if your code is going to work but considering you want to access props, I'm assuming what you want is to make sure you're operating on ReactElement. In that case, your isObject check is not exhaustive enough. What you need is a type guard.

So the quick and dirty option is to write your own type guard and something like this is actually enough:

function isReactElement(child: React.ReactNode): child is React.ReactElement {
  return isObject(child) && 'props' in child;
}

and then instead of

if (!isObject(child)) {
  return child;
}

you just do

if (!isReactElement(child)) {
  return child;
}

and it works. However probably a better idea is to use react-is library which is an official, Facebook-maintained library and it's widely used in many React libraries and it does basically exactly what you want but the checks are significantly better than what I proposed above. In your case you'd want to use isElement, the same way I showed above. Just make sure to install @types/react-is, too.

Collectives™ on Stack Overflow

React children with typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related