Can't render table rows in functional components, objects are not valid as a react child

Question

Uncaught Error: Objects are not valid as a React child

Here is my RowComponent:

function IssueRow(props) {
    const issue = props.issue;
    return (
        <tr>
            <td>{issue.id}</td>
            <td>{issue.status}</td>
            <td>{issue.owner}</td>
            <td>{issue.created}</td>
            <td>{issue.effort}</td>
            <td>{issue.due}</td>
            <td>{issue.title}</td>
        </tr>
    )
};

Here is my Table Component:

function IssueTable(props) {
    const issueRows = props.issues.map(issue => (
        <IssueRow key={issue.id} issue={issue} />
    ))
    return (
        <table className="bordered-table">
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Status</td>
                    <td>Owner</td>
                    <td>Created</td>
                    <td>Effort</td>
                    <td>Due Date</td>
                    <td>Title</td>
                </tr>
            </thead>
            <tbody>
                {issueRows}
            </tbody>
        </table>
    )
};

My Table Component is being rendered from a TableList Component with these properties:

this.state = {
issues: [
   { id: 1, status: 'New', owner: 'Ravan', effort: 5, created: new Date('2018-08-15'), due: undefined, title: 'Error in console when clicking Add' },
   { id: 2, status: 'Assigned', owner: 'Eddie', effort: 14, created: new Date('2018-08-16'), due: new Date('2018-08-30'), title: 'Missing bottom border on panel' }
]
}
.
.
.
render() {
   return (
        <React.Fragment>
            <h1>Issue Tracker</h1>
            <IssueFilter />
            <hr />
            <IssueTable issues={this.state.issues} />
            <hr />
            <IssueAdd createIssue={this.createIssue} />
        </React.Fragment>
    )
    }

I can not figure out, why i am getting that error message. Is it maybe because of some compilation errors? I am not using npx create-react-app, and set the environment up myself.

Answer 1

issue.created and issue.due are Date objects. You can't use them directly as React elements, you have to convert them to string first, for example by using .toString() method.

function IssueRow(props) {
    const issue = props.issue;
    return (
        <tr>
            <td>{issue.id}</td>
            <td>{issue.status}</td>
            <td>{issue.owner}</td>
            <td>{issue.created.toString()}</td>
            <td>{issue.effort}</td>
            <td>{issue.due && issue.due.toString()}</td>
            <td>{issue.title}</td>
        </tr>
    )
};