antd table won't render. Objects are not valid as a React child

Question

I really like what I've seen in antd so far, and I'm trying to introduce it to my current code base, but I can't seem to get a table to render, even when I just copy and paste examples into a new project. For example:

I ran create-react-app to get a fresh project, and updated the app component like so:

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import {Table} from 'antd'

class App extends Component {
    render() {

        const columns = [{
            title: 'Name',
            dataIndex: 'name',
            render: text => <a href="#">{text}</a>,
        }, {
            title: 'Age',
            dataIndex: 'age',
        }, {
            title: 'Address',
            dataIndex: 'address',
        }]

        const data = [{
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
        }, {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
        }, {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
        }, {
            key: '4',
            name: 'Disabled User',
            age: 99,
            address: 'Sidney No. 1 Lake Park',
        }]

        // rowSelection object indicates the need for row selection
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
                name: record.name,
            }),
        }

        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                    <Table>
                        columns={columns}
                        dataSource={data}
                        rowSelection={rowSelection}
                    </Table>
                </p>
            </div>
        )
    }
}

export default App

Note that the column, data, and rowSelection definitions were copied directly from the antd Table docs.

When the page attempts to render, I get the error "Objects are not valid as a React child"

I'm running React 16.2, but can't seem to find any version compatibility info in the antd docs so I'm not sure if that's an issue here.

Following the advice on the antd website, I used their sandbox template, and the table won't render there either. https://codesandbox.io/s/mml3lz31ox

If anyone can offer some insight here on how to use this table, I'd love to hear it!

kingdaro kingdaro · Accepted Answer · 2018-02-24T22:55:21

The syntax is incorrect. It should be this:

<Table
  columns={columns}
  dataSource={data}
  rowSelection={rowSelection}
/>

What your code is doing now is passing children instead, with columns=, dataSource= etc. being passed down as text, with {columns} and the like being interpreted as react element children. Objects are not valid there, hence the error.

antd table won't render. Objects are not valid as a React child

1 Answers