CODEWITHSUNDEEP
reactjs
user15685422
user15685422

Reputation:

React.js : index.js:1 Warning: Each child in a list should have a unique "key" prop

I'm doing an app, in the fronted i'm using react, and whenever that i use the map function, i get these errors.

enter image description here

And you would think... Well, that's because you didn't assing any key to your container, and the truth is that, i did... but the errores keeps showing.

Let me show you the code

{specificPhotos.map((photo, i) => {
                return (
                  <>
                    {/* The Photo */}
                    <PhotoWrapper key={photo.id}>
                      {/* For Images */}
                      {photo.photo.charAt(5) === "i" && (
                        <img src={photo.photo} />
                      )}
                      {/* For Videos */}
                      {photo.photo.charAt(5) === "v" && (
                        <>
                          <video src={photo.photo} />
                        </>
                      )}
                      {/* For Videos Too */}
                      {photo.photo.charAt(5) === "v" && (
                        <>
                          <VideoPlay>
                            <VideoPlayIcon />
                          </VideoPlay>
                        </>
                      )}

And the other time i used map fn as well

 {singlePhoto.comments.map(comment => {
          return (
            <>
              <ContainComment key={comment.id}>
                {/* Photo */}

                <PresentationImg
                  style={{ width: "100%", maxHeight: "50px" }}
                  area="perfil"
                >
                  <CommentPresentation>
                    <img src={comment.presentation} />
                  </CommentPresentation>
                </PresentationImg>

                {/* Body */}

                <TheComment>
                  <h2>
                    {comment.user} <span>{comment.body}</span>
                  </h2>
                </TheComment>

So, where am i supossed to do with the key? maybe i did something wrong... I don't know, just help me and thanks for your time !

Upvotes: 0

Views: 126

Answers (4)

rdbishop
rdbishop

Reputation: 16

As mentioned above, the React fragment <></> is the issue.

Why is this:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

different from this?

const todoItems = todos.map((todo) =>
  <>
    <li key={todo.id}>
      {todo.text}
    </li>
  </>
);

Because the fragment needs the key on it (or removed) in the 2nd snippet to prevent the map error.

If you need to keep the fragment to avoid adding an unnecessary div, you could also do:

const todoItems = todos.map((todo) =>
  <React.Fragment key={todo.id}>
    <li>
      {todo.text}
    </li>
  </React.Fragment>
);

Source: https://reactjs.org/docs/lists-and-keys.html#keys

Upvotes: 0

T J
T J

Reputation: 43156

Your key should be on the top most element, which in this case are the fragments. See keyed-fragments

<React.Fragment key={comment.id}>
    <ContainComment>

Upvotes: 1

David Grosh
David Grosh

Reputation: 188

you need to add a key to the fragment right after the return (<>), but unfortunately you can only add a key if it is imported as Fragment (<Fragment key={}></Fragment>), instead of using the short syntax.

Upvotes: 0

Tolumide
Tolumide

Reputation: 984

The problem is your second code snippet. Option 1: If you can remove the React fragment i.e <></>

Option 2: However, If the React fragment is serving the purpose of wrapping the elements together, you can replace it with a

<div key={comment.id}><div/>

this means that you can remove the key={comment.id} on the <ContainComment key={comment.id}>

Upvotes: 1

Related Questions