Helper function to retrieve a value from an object fails with more than one item in the object

Question

I have a helper function to retrieve a user's name or email from the redux store when the user's UID is passed as an argument

From the store

console.log(typeof users) //object
console.log(users)

[
    0: {
        displayName: "User One"
        email: "userone@example.com"
        id: "c9E5RfPVVxMNPz3MsORs76cG46G3"
    },
    1: {
        displayName: "User Two"
        email: "usertwo@example.com"
        id: "mbuPoIcEMOhEvSB23IRqj5AIbZn2"
    }
]

// getUserDetails.js

import { useSelector } from 'react-redux';

export function getUserDetails(searchKey) {
  const users = useSelector((state) => state.firestore.ordered.users);
  console.log(users)
  console.log(typeof users)
  return (
    users &&
    searchKey &&
    users.filter(function (obj) {
      return Object.keys(obj).some(function (key) {
        return obj[key].includes(searchKey);
      });
    })
  );
}

And it is used by my @devexpress/dx-react-grid CRUD tables, by taking the field createdBy: fdsj75g43hfihsdhi and returning a name or email, like this:

  const UserNameFormatter = ({ value }) => {
    return getUserDetails(value)[0].displayName;
  };

The function works great with only one user, but as soon as I add another user to Firestore, the function throws an error:

TypeError: obj[key].includes is not a function
(anonymous function)
src/utils/getUserDetails.js:10
   7 |   searchKey &&
   8 |   users.filter(function (obj) {
   9 |     return Object.keys(obj).some(function (key) {
> 10 |       return obj[key].includes(searchKey);
     | ^  11 |     });
  12 |   })
  13 | );

I appreciate any suggestions, thanks.

Answer 1

It seems that you're expecting each key to be a string, but that's not always the case.

I recommend doing a check before using the includes method like this:

import { useSelector } from 'react-redux';

export function getUserDetails(searchKey) {
  const users = useSelector((state) => state.firestore.ordered.users);
  console.log(users)
  console.log(typeof users)
  return (
    users &&
    searchKey &&
    users.filter(function (obj) {
      return Object.keys(obj).some(function (key) {
        return typeof obj[key] === "string" && obj[key].includes(searchKey);
      });
    })
  );
}

Answer 2

you can try this

  const UserNameFormatter = ({ value }) => {
    return getUserDetails(value[0].displayName);
  };

Example:

 var temp1 = [ { displayName: "User One", email: "userone@example.com", id: "c9E5RfPVVxMNPz3MsORs76cG46G3", }, { displayName: "User Two", email: "usertwo@example.com", id: "mbuPoIcEMOhEvSB23IRqj5AIbZn2" } ] function getUserDetails(searchKey) { return ( temp1.filter(function (obj) { return Object.keys(obj).some(function (key) { return obj[key].includes(searchKey); }); }) ); } console.log(getUserDetails(temp1[1].id))