mapping and filtering an array of objects with key

user_14181400 0
Viewed 680

I have an array of objects for users:

const users = [
    0: {
        name: "John",
        email: "jsmith@gmail.com"
    },
    1: {
        name: "Bob",
        email: "bsmith@gmail.com"
    }
]

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.

reactjs javascript
3 Answers

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>
);
user_61083900

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: "jsmith@gmail.com"
  },
  1: {
    name: "Bob",
    email: "bsmith@gmail.com"
  },
  2: {
    name: "Jill",
    email: "jjones@gmail.com"
  },
  3: {
    name: "Joan",
    email: "jjohnson@gmail.com"
  }
};

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

Edit unruffled-minsky-pgjzh

user_53853810

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: "jsmith@gmail.com"
  },
  1: {
      name: "Bob",
      email: "bsmith@gmail.com"
  }
 }

  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>
  );
}
user_79350570
Related