mapping nested object as props to custom component

user_14799165 0
Viewed 106

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

jsx reactjs object nested json
1 Answers

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}</>;
};

Edit rough-sea-hupq1

user_86908570
Related