mapping nested object as props to custom component - json

Question

I have an app where the user will search for a term and they will see the results rendered. The results, in this case, are from a nested JSON object. I have a component called CompanyInfoList that passes props to Results component that renders the JSX. The props are employee, date, tax, and balance. I tried to map within a map in the component, but it did not work. My goal is to get access to the details data, how do I do this. The files to look at are CompanyInfoList and Results. The data is loaded in via axios in CompListContext
In the CompSearch comp when you enter "ABC" nothing will happen, because I am not accessing the details data from the JSON obj. This is what I need help in doing.
Here is the mongo DB JSON object (pasted from PostMan):
"data": {
"details": {
"employee": "person1",
"date": "test date",
"tax": "test tax",
"balance": "22"
},
"company": "TEST-ABC",
"_id": "60dba9fe7641a44d40364c1f",
"__v": 0
}
Here is my code

Answer 1

Given the company array object shape:
{
details: {
employee: "person1",
date: "test date",
tax: "test tax",
balance: "22"
},
company: "TEST-ABC",
_id: "60dba9fe7641a44d40364c1f",
__v: 0
}
You are filtering by the element's company property, and when mapping the filtered results in CompanyInfoList you need to access the details property, i.e. result.details.employee.
const CompanyInfoList = ({ filtered }) => {
const fltr = filtered.map((result) => (
<Results
key={result.details.id}
employee={result.details.employee}
date={result.details.date}
tax={result.details.tax}
balance={result.details.balance}
/>
));
return <>{fltr}</>;
};