How to render react children as a and not {children}

Question

I have a simple component:

const Test = ({header}) => <View> <Header /> </View>`

and call it like so:

<Test header={<View> Test </View} />

but it fails saying:

JSX element type 'Header' does not have any construct or call signatures

How do I fix this? I need to render it like <Header /> so I can pass further props down to it

I don't want to render it like {header} this.

@AjeetShah because 1. it's a component so should be rendered like < /> and 2 I need to pass props into it — Red Baron, Mar 23 '21 at 14:13
@RedBaron no it should not. the receiving component will render it as long as it is a `React.Node`. — Hadi KAR, Mar 23 '21 at 14:16
@EmileBergeron sort of yeh. but can that work with any prop? still getting the error: `objects not valid as react child` for some reason — Red Baron, Mar 23 '21 at 14:24
I'd suggest you use [Render Props](https://reactjs.org/docs/render-props.html), which is explained in the linked thread as well, and can be used with any prop. — Emile Bergeron, Mar 23 '21 at 14:26
` Test} />` and within `Test`: `const Test = ({header}) => {header(data)}` — Emile Bergeron, Mar 23 '21 at 14:29
yeh this is what I had initially but it's saying objects are not valid as react children... — Red Baron, Mar 23 '21 at 14:33
It's because you're trying to render something like `{data}` directly, instead of the actual information you'd like to render, like `{data.title}`. — Emile Bergeron, Mar 23 '21 at 14:34
thanks, feel free to answer and will mark as correct. up to you — Red Baron, Mar 23 '21 at 14:36
If you can, you should select the [thread above](https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children) as the "duplicate" since none of the current answers below are new, complete, nor useful, and neither would I write an answer that's worthy of duplicating the information. — Emile Bergeron, Mar 23 '21 at 14:38

score 0 · Answer 1 · answered Mar 23 '21 at 14:12

If you want to pass props to your children have a look at the React API with the function cloneElement

You can foreach your children using React.Children

function Component({ children, ...props }) {
    const newChildren = React.Children.map(children, child => {
        return React.cloneElement(child, { ...child.props, ...props });
    });
   return (
       <div>
          {newChildren}
       </div>
);

}

Hassan Kandil · Answer 2 · 2021-03-23T14:12:20.257

-1

You can make it like this:

const Test = ({children}) => <View> {children} </View>

and use it like this:

<Test>
  <Header/>
</Test>

For more read the docs composition-vs-inheritance

edited Mar 23 '21 at 14:12

answered Mar 23 '21 at 14:10

Hassan Kandil

1,612
1
13
26

I cant coz Header != header – Red Baron Mar 23 '21 at 14:12
sorry i updated my answer – Hassan Kandil Mar 23 '21 at 14:13

Hadi KAR · Answer 3 · 2021-03-23T14:34:00.877

-1

you can try to do this

const Test = ({header})=>{
  
  return <View>
   {React.cloneElement(header, ObjectContainingPropsYouWantToPass)}
  </View>
}

source

edited Mar 23 '21 at 14:34

answered Mar 23 '21 at 14:20

Hadi KAR

384
3
11

EXACTLY what i meant. i am just proving a point that calling `header` as `
` is useless – Hadi KAR Mar 23 '21 at 14:24

score -1 · Answer 4 · answered Mar 23 '21 at 14:20

-1

Let me know if you are trying to achieve this

const Test = ({header: Header}) => <View> <Header /> </View>

answered Mar 23 '21 at 14:20

Arunsridher

43
1
5

Welcome. It is in general more useful to add this type of suggestion as a comment to the question instead of an answer (which it clearly isn't). That likely explains the downvotes you are receiving. – Ray Oei Mar 23 '21 at 15:15

How to render react children as a and not {children}

4 Answers4