I am trying to filter an array in React for only certain items (in my case I want all items that have type: "Plant"). I can get the data from an API successfully but filtering its produces this error: Unhandled Rejection (TypeError): undefined is not an object (evaluating 'data.Array.object')
Here is what the data looks like if I console log it: data
Here is my full code:
import React from "react";
import { API, graphqlOperation } from 'aws-amplify';
import { listTrackerItems } from '../graphql/queries';
class TrackerPlantsPage extends React.Component {
state = {
plant:'',
plants: [],
active: []
};
async componentDidMount() {
const result = await API.graphql(graphqlOperation(listTrackerItems))
let data = result.data.listTrackerItems.items
console.log(data)
let activePlants = data.Array.filter(t=>t.type === 'Plant');
this.setState({active: activePlants, plants: data });
}
render() {
const { plants, active } = this.state
console.log(plants)
return (
<>
<div class="container">
{/* Cards */}
<div id="toggle-harvested" class="">
<div class="uk-child-width-1-3 uk-grid-small uk-grid-match uk-grid">
{plants.map(item => (
<div key={item.id} class="uk-margin-top uk-margin-bottom">
<div class="uk-card uk-card-secondary uk-card-body">
<div class="uk-card-badge uk-label">Harvested on {item.harvestDate}</div>
<div class="uk-child-width-expand@s uk-text-center" uk-grid>
<div>
<div>
<h3 class="uk-card-title uk-margin-remove-bottom">{item.name}</h3>
</div>
</div>
</div>
<ul class="uk-list uk-list-striped">
<li>Planted: {item.todaysDate}</li>
<li>Assigned: {item.assignedUser}</li>
<li>{item.description}</li>
</ul>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</>
)
}
}
export default TrackerPlantsPage;
Regards