How to use props as component?

Question

I have a component where I receive props that include a Link component (of React router, but could be anything):

  children: [
    {
      id: '1',
      isActive: false,
      label: 'Forms',
      icon: ,
      link: ,
    },

Then in the component receiving those props I can extract the props form the children:

  
    {React.Children.map(children, (child) => {
      if (!React.isValidElement(child)) {
        return null;
      }
      return React.cloneElement(child, {
        children: {child.props.label},
      });
    })}

The child.props.label does return the correct label for example. However what I'd like to do is replace that wrapping

with the link props, something like this:

children: {child.props.label},

This of course doesn't work. If I'm trying with React.createElement:

children: React.createElement(child.props.link),

The first argument should be a string, but I'm passing a component. The thing is that I must receive the Link component from outside with its own context, and I cannot re-create it, otherwise I could avoid all the complexity.

Does anyone know what would be the correct way to render that link props as a JSX wrapper?

T.J. Crowder · Answer

Your link: prop isn't a component, it's an element. This is what it would look like as a component: link: Link (and then you'd need to pass the props for Link separately, perhaps as linkProps):

children: [
    {
      id: '1',
      isActive: false,
      label: 'Forms',
      icon: ,
      link: Link,                     // ***
      linkProps: {to: 'somewhere'},   // ***
    },

Then, to use it, you need to be referencing it via an identifier with an upper case first character, since that's how React/JSX differentiate between tags (like div or svg) and components.

So something along these lines:

const Link = child.props.link;
return React.cloneElement(child, {
    children: {child.props.label},
});

...although that may need tweaking as it's not clear to me why you're doing the extracting and cloning.

Here's a simpler example showing using a component as a prop:

const { useState } = React;

const Example = ({ link: Link, linkProps, label }) => {
    return {label};
};

const SomeNiftyLink = ({ href, className, children }) => (
    
        {children}
    
);

const App = () => {
    return (
        
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();

How to use props as component?

1 Answers