Objects are not valid as a React child (found: object with keys)

Question

I create a component like so:

let bList = bObj.map((obj, index) => {
        let { 
            icon, htmlType, onClick } = obj;

        let _b = <Button 
                    htmlType = { htmlType } 
                    icon = { icon }
                    onClick = { () => {this._onClick()} } />

        if(someVar) {
            return (
                <AnotherComp style = { someVar } 
                    key = { index } >
                    { _b }
                </AnotherComp>
            );

        } else {
            return (
                { _b }
            );
        }
    });

bList = 
    <div style = { wrap }>
        <myComp style = { grp }> 
            { buttonsList } 
        </myComp>
    </div>

return bList;

That returns me

Uncaught Error: Objects are not valid as a React child (found: object with keys {_bu}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of MyComp .

However, when I write it like this:

let bList = bObj.map((obj, index) => {
        let { 
            icon, htmlType, onClick } = obj;

        if(someVar) {
            return (
                <AnotherComp style = { someVar } 
                    key = { index } >
                    <Button 
                        htmlType = { htmlType } 
                        icon = { icon }
                        onClick = { () => {this._onClick()} } />
                </AnotherComp>
            );

        } else {
            return (
                <Button 
                    htmlType = { htmlType } 
                    icon = { icon }
                    onClick = { () => {this._onClick()} } />
            );
        }
    });

bList = 
    <div style = { wrap }>
        <MyComp style = { grp }> 
            { buttonsList } 
        </MyComp>
    </div>

return bList;

It works. Where is the difference between saving <Button ../> in a variable and writing it in there directly?!

Answer 1

Difference is you are using extra {} , remove that it will work:

return  _b;

Meaning of return ({ _b }) is:

return ({'_b' : _b});

That means you are returning an object with key _b , not the JSX .

Check this snippet:

 let a = 5; let b = { a }; console.log('b = ', b);