Question

0

56

Vistas

How to map React component under correct category

I am able to map 3 objects as a normal list however how can I map it under the correct heading?

One way is to push each object to it's own array e.g. const employed = [] but it looks messy. Any suggestions for a better approach?

export const App = () => {
  const [list, setList] = useState([
    { name: "foo", status: "student" },
    { name: "bar", status: "employed" },
    { name: "foo", status: "unemployed" },
  ])
  const items = list.map(({name, status}, index) => {
        <Profile ... />
  })
  return (
    <div>
      <div>
        <h1>Students</h1>

      </div>
      <div>
        <h1>Employed</h1>
      </div>
      <div>
        <h1>Unemployed</h1>
      </div>
    </div>
  )
}

7 months ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Making three seperate lists using filter() would be one way to do it. Then you can show them as you need:

export const App = () => {
  const [list, setList] = useState([
    { name: "foo", status: "student" },
    { name: "bar", status: "employed" },
    { name: "foo", status: "unemployed" },
  ])

const students = list.filter(x => x.status === 'student' ).map(x => <Profile... />);
const employed = list.filter(x => x.status === 'employed' ).map(x => <Profile... />);
const unemployed = list.filter(x => x.status === 'unemployed' ).map(x => <Profile... />);

  return (
    <div>
      <div>
        <h1>Students</h1>
         {students}
      </div>
      <div>
        <h1>Employed</h1>
          {employed}
      </div>
      <div>
        <h1>Unemployed</h1>
          {unemployed}
      </div>
    </div>
  )
}

7 months ago · Juan Pablo Isaza Denunciar

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-04T02:36:41.766Z

Keep another mapping to your statuses to header values and filter the list according to the statuses.

This would also work.

import { useState } from "react";

const STATUSES = {
  student: "Studnets",
  employed: "Employed",
  unemployed: "Unemployed",
  retired: "Retired"
};

const App = () => {
  const [list, setList] = useState([
    { name: "foo", status: "student" },
    { name: "bar", status: "employed" },
    { name: "foo", status: "unemployed" },
    { name: "baz", status: "student" }
  ]);

  return (
    <div>
      {Object.entries(STATUSES).map(([statusKey, displayValue]) => {
        const data = list
          .filter(({ status }) => status === statusKey)
          .map(({ name, status }, index) => <div>{name}</div>);
        if (data.length > 0) {
          return (
            <div>
              <h1>{displayValue}</h1>
              {data}
            </div>
          );
        }
      })}
    </div>
  );
};

export default App;