React: Uncaught Error: Objects are not valid as a React child

Question

I am not quite sure why I am getting this error.

react.js:20149 Uncaught Error: Objects are not valid as a React child (found: object with keys {showThreads}). 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 `CreateRow`.(…)

Here is the code below:

var ShowThreads = React.createClass({

    render: function() {
        return(
            <table>
                <tbody>
                    {this.props.thread}
                </tbody>
            </table>
        )
    }
});

var CreateRow = React.createClass({
    getInitialState: function() {
        return {
            threadVisible: false,
            threads: ['lorem', 'ipsum', 'imperator', 'quad'],
        }
    },

    onClick: function(){
        // this.getThreads()
        this.setState({threadVisible: !this.state.threadVisible})
    },

    render: function() {
        var showThreads = this.state.threads.map((thread) => {
            return (
                <ShowThreads thread ={thread}/>
            )
        });

        var rows = [(
            <tr onClick={this.onClick}>      
                    <td>{this.props.row['id']}</td>
                    <td>{this.props.row['email']}</td>
                    <td>{this.props.row['first']}</td>
                    <td>{this.props.row['last']}</td>
                    <td>{this.props.row['title']}</td>
                    <td>{this.props.row['company']}</td>
                    <td>{this.props.row['linkedin_url']}</td>
                    <td>{this.props.row['role']}</td>
                </tr>
            ),(
                <tr>
                    <td colSpan="8">
                         {
                            this.state.threadVisible
                            ? {showThreads}
                            : null
                        }
                    </td>
                </tr>
        )]
        return(
            <tbody>
                {rows}
            </tbody>
        )
    },

})

When I printed out showThreads, it returned an array with 4 objects as expected. Not quite sure why I am getting that error? The goal is to create 4 "threads" beneath each row that are visible from onClick.

JulienD · Accepted Answer · 2016-12-03 23:44:00Z

4

{showThreads} is an object, not the array you expect. You want a simple showThreads instead because the condition is already inside curly brackets.

answered Dec 3, 2016 at 23:44

JulienD

7,32310 gold badges57 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React: Uncaught Error: Objects are not valid as a React child

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