Error no detectado: los objetos no son válidos como hijos de React
Aquí está mi 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> ) };Aquí está mi componente de tabla:
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> ) };Mi componente de tabla se representa desde un componente TableList con estas propiedades:
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> ) }No puedo entender por qué recibo ese mensaje de error. ¿Es tal vez debido a algunos errores de compilación? No estoy usando npx create-react-app, y configuro el entorno yo mismo.
issue.created y issue.due son objetos de fecha. No puede usarlos directamente como elementos React, primero debe convertirlos en cadenas, por ejemplo, usando el método .toString() .
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> ) };