fixing warning ///Each child in a list should have a unique "key" prop

Question

i am having the same issue here in the below code. I have added a key where think it is appropriete but still getting key warning message. Hi guys, i am having the same issue here in the below code. I have added a key where think it is appropriete but still getting key warning message.

Can you help, please?
Leo

import { useState } from "react";
import { FaTimes } from "react-icons/fa";
import EditSkillsForm from "./editSkillsForm";
const SkillsList = ({ inputs, handleDeleteClick, handleCancelClick, handleEditClick, setIsEditing, handleUpdateInput,currentInput}) => {
const [ isEditing, setISEditing ] = useState(false);
  //const [ currentSkill, setCurrentSkill ] = useState({});

 handleEditClick = () =>  {
     setISEditing(true);
     console.log("editing", true)

  }
  

  


  return (

    <div className="col-lg-4 col-sm-6 mb-4">
      <div className="card p-2">
        <div className="card-Header text-center mb-4">
          <h4 className="card-title mt-2">Mastered Skills List</h4>
        </div>

        {inputs.map((skill, idx) => {
          return (
            <>
              <div className="card width: 10rem; mb-3 p-2" key={idx}>
                <div className="card-header text-center mb-4">
                  <h5 className="card-title mt-2">{skill}</h5>
                </div>
                <img src="../../logo.svg" className="card-img-top" alt="..." key={idx} />
                <div className="card-body">
                  <div className="card-title text-center mt-2 " key={idx}>
                    {
                      isEditing ? (
                        <div key={idx}>
                        <EditSkillsForm 
                        inputs={inputs} 
                        editing={setIsEditing} 
                        cancelClick= {handleCancelClick}
                        updateInput = {handleUpdateInput}
                        currentInput={currentInput}
                              
                         />
                        </div>
                      ) : null
                    }
                    {/* <EditSkillsForm inputs={inputs} /> */}
                    <ol key={idx}>
                      Skill name: {skill}
                    </ol>
                  </div>
                </div>
                <div className="card-footer" >
                  <div className="row mb-2" key={idx}>
                  <button
                    className="btn btn-primary w-100"
                    onClick={() => handleEditClick(inputs.idx)}>Edit
                  </button>
                  </div>
                  <div className="row">
                  <FaTimes className="mb-2" fill="#ffc800" onClick={() => handleDeleteClick(idx)} key={idx} />
                  </div>
                </div>
              </div>
            </>
          )
        }
        )}
      </div>
    </div>
  );
}

export default SkillsList;

React wants you to put a key on the fragment `<>`. Import `Fragment` from react and change your `<>` and `>` to be a . Then put something like `` — Dan Zuzevich, Oct 18 '21 at 15:19
It's important to understand what the key is used for, otherwise you may run into issues. React specifically uses key to track a dom element attached to the data for that element. This is the reason the suggest not using index: removing an item from the array would assign the index to the next element, and you'd see bad output. You need to use something unique in your data like a primary key, or create a unique key as a combination of values is necessary. In this case, like Dan is saying, it needs to be on the fragment, the first element inside map. — FranCarstens, Oct 18 '21 at 15:24
@DanZuzevich is there a way to debug this easier? The console is not really helping to locate where the issue is. thanks again for your help — Leo, Oct 18 '21 at 15:38

score 0 · Answer 1 · answered Oct 18 '21 at 15:18

the key must be unique for all the elements in your component. as I can see you using the same key idx in multiple div elements so it isnt unique anymore. try to make for each div a special name in addition of that idx value to make it unique for each one.

fixing warning ///Each child in a list should have a unique "key" prop

1 Answers1