Objects are not valid as a React child (found: object with keys {children}): ReactJS

Question

const Label = children => (
  <div className="label">{children}</div>
);

<Label>some text</Label>

This gives an error:

Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead.

What's the right way to do it?

Answer 1

Reason for Objects are not valid as a React child?

Because here:

const Label = children => (
   <div className="label">{children}</div>
);

Children is just the argument name, it will have the values of props, and it will be an object, like this:

props = {
   children: .....
}

Possible Solutions:

Use destructuring and take out the children from props objects, it will work. Like this:

const Label = ( {children} ) => (
   <div className="label">{children}</div>
);

Or use children.children (actually it will be props.children):

const Label = children => (
   <div className="label">{children.children}</div>
);

Check working example (check the console log values you will get the better idea):

const Label1 = (children) => {
   console.log(children);
   return <div className="label">{children.children}</div>
};

const Label2 = ({children}) => {
   console.log(children);
   return <div className="label">{children}</div>
};

ReactDOM.render(<div>
    <Label1>ABC</Label1>
    <Label2>ABC</Label2>
  </div>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>