How to map React component under correct category-CodePudding

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>
  )
}

CodePudding user response：

Making three seperate lists using