mapping and filtering an array of objects with key

Question

I have an array of objects for users:

const users = [
    0: {
        name: "John",
        email: "[email protected]"
    },
    1: {
        name: "Bob",
        email: "[email protected]"
    }
]

A useState that controls which user id is selected.

const [id, setId] = useState("1");

For example I have a default state set to id=1

I am trying to map and filter through the array of objects above to get the name, and email based on the id inside the array for the object.

Here is the code of what I am trying to do, but it doesn't seem to get the data from array of objects.

{Object.keys(users).filter((user) => user.id === id).map((user, index) => {
    const userDetails = users[user]
    return (
        <div className="profile" key={index}>
            <h1>{userDetails.name}</h1>
            <h1>{userDetails.email}</h1>
        </div>
    );
})}

Any help would be appreciated.

Viet · Accepted Answer · 2021-09-02 08:24:00Z

5

users is an array of objects. So just use index without filter or map:

const userDetails = users[id]
return (
    <div className="profile">
        <h1>{userDetails.name}</h1>
        <h1>{userDetails.email}</h1>
    </div>
);

answered Sep 2, 2021 at 8:24

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ksav · Accepted Answer · 2021-09-02 13:26:28Z

To add to the accepted answer:

Even if users was an object, Object.keys(users).filter((user) => user.id === id).map() is redundant if you're only interested in a single user. You can just access the users object directly by the selected id as a key.

import { useState } from "react";

const users = {
  0: {
    name: "John",
    email: "[email protected]"
  },
  1: {
    name: "Bob",
    email: "[email protected]"
  },
  2: {
    name: "Jill",
    email: "[email protected]"
  },
  3: {
    name: "Joan",
    email: "[email protected]"
  }
};

export default function App() {
  const [selectedUserId, setSelectedUserId] = useState("0");
  return (
    <>
      <div className="profile">
        <h1>{users[selectedUserId].name}</h1>
        <h1>{users[selectedUserId].email}</h1>
      </div>
      <label>
        selected user id:
        <input
          type="number"
          min={0}
          max={Object.keys(users).length - 1}
          value={selectedUserId}
          onChange={(e) => {
            setSelectedUserId(e.target.value);
          }}
        />
      </label>
    </>
  );
}

Iceberg · Accepted Answer · 2021-09-02 08:50:09Z

0

The syntax of your users declaration is wrong. Either change it to an array or an object. Now its a mix of both in wrong syntax.

The following code is a workable sample.

export default function App() {
 const [id, setId] = useState("1");

 const users = {
  0: {
      name: "John",
      email: "[email protected]"
  },
  1: {
      name: "Bob",
      email: "[email protected]"
  }
 }

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>

      {!!users[id] && <div className="profile">
                        <h1>{ users[id].name}</h1>
                        <h1>{users[id].email}</h1>
                      </div>
      }
   
    </div>
  );
}

edited Sep 2, 2021 at 8:50

answered Sep 2, 2021 at 8:36

Iceberg

3,56028 silver badges22 bronze badges

4 Comments

Nicolas Menettrier Over a year ago

The syntax is not wrong, it's just what display console.log inside your browser

Iceberg Over a year ago

I mean the users object posted by the author instead of the one posted by me. @NicolasMenettrier

Nicolas Menettrier Over a year ago

yes but i'm quite sure he just copy pasted a console log result inside the browser (it show exactly the same output)

Iceberg Over a year ago

Right, his users declaration resembles the one in chrome console. @NicolasMenettrier

Collectives™ on Stack Overflow

mapping and filtering an array of objects with key

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related