0

I've been told that this problem it's because i might be having this tag <> </> inside the map function, and that is the main reason for the error, but this is not the case and i'm still having this problem, let me show

enter image description here

Now, let me show some code

  <SearchResults>
              {results === "" ? (
                <NoSearch>No hay búsquedas recientes</NoSearch>
              ) : (
                <>
                  {filteredUsers.length > 0 ? (
                    <>
                      {filteredUsers.map(user => {
                        return (
                          <DisplayUsers
                            key={user.id}
                            whileHover={{
                              backgroundColor: "rgba(0, 0, 0, 0.08)",
                              borderRadius: "1.2rem"
                            }}
                          >
                            <DisplayPhoto>
                              {user.perfil ? (
                                <img src={user.perfil} alt="" />
                              ) : (
                                <DefaultUser
                                  style={{
                                    width: "38px",
                                    height: "38px",
                                    borderRadius: "50%"
                                  }}
                                />
                              )}
                            </DisplayPhoto>
                            <DisplayName>
                              <h2>{user.name}</h2>
                              {/* <p>Amig@</p> */}
                            </DisplayName>
                          </DisplayUsers>
                        );
                      })}
                    </>
                  ) : (
                    <NoSearch>No hay resultados</NoSearch>
                  )}
                </>
              )}
            </SearchResults>

If i put the key in the main container, why am i still having this problem ?

If you can help me, you're the greatest, thanks !!

Diego
  • 421
  • 3
  • 9
  • 34
  • 1
    Does this answer your question? [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) – Louys Patrice Bessette May 22 '21 at 15:39
  • I think so... i tried to implement the solution, adding key to each child inside component ,but i still have the error – Diego May 22 '21 at 15:50
  • Ouu damn, the value of my id is undefined, i think that is the problem... But thank you for your answer, i couldn't even imagine how important keys are – Diego May 22 '21 at 15:54
  • 1
    I would suggest you to look for a package to handle that annoying aspect of React. There is a couple. Google that `react npm unique key`. – Louys Patrice Bessette May 22 '21 at 15:55

0 Answers0