I'm trying to render jsx via mapping through an array that has been retrieved from my database and set to local state. The error I am getting is
Objects are not valid as a React child (found: object with keys {id, name, displayorder}). If you meant to render a collection of children, use an array instead.
Please see my code below...
class TableList extends Component {
constructor(){
super()
this.state = {
allPeopleResults: [],
searchName: '',
searchedNameResults: []
}
}
componentDidMount = () => {
axios.get('http://localhost:3003/api/getPeople').then(response => {
console.log(response.data)
this.setState({
allPeopleResults: response.data
})
})
}
<Card
title={this.state.allPeopleResults}
category="Here is a subtitle for this table"
ctTableFullWidth
ctTableResponsive
content={
<Table striped hover>
<thead>
<tr>
{
this.state.allPeopleResults.map((person, key) => {
return (
<div>
<th key={key}>{person.name}</th>
</div>
);
})
}
</tr>
</thead>
<tbody>
{this.state.allPeopleResults.map((person, key) => {
return (
<td key={key}>{person.name}</td>
)
})
})}
</tbody>
</Table>
}
/>
</Col>
I know that my allPeopleResults property on state is correctly getting set with an array because the console.log in componentDidMount returns what I want it to, because it returns an array of objects from my database. I am aware that arrays ARE objects, but I would have thought that using the.map method would have done what it needed to do.
Can anyone help?
