Im getting the warning Warning: Each child in a list should have a unique "key" prop.. My understanding of react was that when you pass to a new component you give it the Id of a prop, which i am doing, yet im still getting this warning. In my code i have some dummy data that is used to set the state of table data i.e

const DumData = 
    {   id: 1,
        UserGroup:[
    {
        id: "1",
        Name: "Dax Johnson",
        AddressLine: "82 Mahu road",
        Email: '[email protected]',
        ContactNumber: "02791743",
        Zip: '8801',
        Notes: 'His dog is swag',
        Animals: [
                {   id: "1",
                    PatientID: "23",
                    AnimalName: 'SwagDog',
                    Species: "Canine",
                    Breed: "Dog",
                    Gender: "Male",
                    DOB: "",
                    Vists: [{
                        id:1 ,
                        time: 'October 31st 2021'
                    },
                    {
                        id:2 ,
                        time: 'October 21st 2021'
                    }]
                },
                { id: '2',
                AnimalName: 'CoolCat',
                Species: "Feline",
                Breed: "Cat",
                Gender: "Female",
                DOB: "",
                Vists: [{
                    id:1 ,
                    time: 'March 4th 2021'
                }]
                }
                ],
    },
    {
        id: "12",
        Name: "Willam McDonald",
        AddressLine: "2 Wacky Ave",
        Email: '[email protected]',
        Zip: '8661',
        ContactNumber: "033777300",
        Notes: 'His cat is cool',
        Animals: [
              { 
              id: "1",
              PatientID: "23",
              AnimalName: "Molder",
              Species: "Feline",
              Breed: "Cat",
              Gender: "Female",
              DOB: "2008",
              Vists: [{
                id:1 ,
                time: 'February 4th 2022'
            }]
            }
            ],


      },    
      {
        id: "3",
        Name: "Oscar Issac",
        AddressLine: "2 Wacky Ave",
        Email: '[email protected]',
        Zip: '7041',
        ContactNumber: "0279000",
        Notes: 'His cat is cool',
        Animals: [
              { 
              id: "1",
              PatientID: "23",
              AnimalName: "Cool cat",
              Species: "Feline",
              Breed: "Cat",
              Gender: "Female",
              DOB: "2008",
              Vists: [{
                id:1 ,
                time: 'June 24th 2021'
            }]
              }
              ],
      }    ]
    
    };

and then later const [tableData, settableData] = useState(DumData);

I create a component table called Hometable where i pass it the tableData and the key id

<div className='Hometable-div'>
                <Hometable
                    data={tableData}
                    key={tableData.id}
                ></Hometable>
            </div>

and then i map the data so it is displayed in the table in the Hometable component. like so

function Hometable(props) {
    var OwnerName;
    var Animalname;
    var breed;

    return (
      <div className='table-container'>
          <table>
              <thead>
                  <tr>
                      <th>Owner</th>
                      <th>Animal Name</th>
                      <th>Type/Breed</th>
                      <th>Vist Time</th>
                  </tr>
              </thead>
              <tbody>
              {props.data.UserGroup.map((person) => (
                    OwnerName = person.Name,
                    person.Animals.map((Animal) => ( 
                        Animalname = Animal.AnimalName,
                        breed = Animal.Breed,
                        Animal.Vists.map((vist) => (
                            <tr>
                                <td>  <i ></i> {OwnerName} </td>
                                <td> {Animalname}</td>
                                <td> {breed} </td>
                                <td> {vist.time} </td>
                            </tr>
                        )) 
                    )) 
                ))}

                <tr>
                  <td className='footer'> 
                      
                      </td>
                      <td className='footer'> 
                          
                      </td>
                      <td className='footer'>
                          
                          </td>
                      <td className='footer'>
                          <button className='TableButton'> Page 1</button>
                      </td>
                  </tr>
              </tbody>
          </table>

      </div>
    );
  }
  
  export default Hometable;

I understand i dont use the key value in Hometable so this might be an easy fix if anyone can help me resolve this warning?

CodePudding user response：

Try passing the key here in the code

{props.data.UserGroup.map((person) => (
                    OwnerName = person.Name,
                    person.Animals.map((Animal) => ( 
                        Animalname = Animal.AnimalName,
                        breed = Animal.Breed,
                        Animal.Vists.map((vist, index) => (
                         // or visit.id if available
                            <tr key={index}>
                                <td>  <i ></i> {OwnerName} </td>
                                <td> {Animalname}</td>
                                <td> {breed} </td>
                                <td> {vist.time} </td>
                            </tr>
                        )) 
                    )) 
                ))}

CodePudding user response：

Try using this code :

function Hometable(props) {
    var OwnerName;
    var Animalname;
    var breed;

    return (
      <div className='table-container'>
          <table>
              <thead>
                  <tr>
                      <th>Owner</th>
                      <th>Animal Name</th>
                      <th>Type/Breed</th>
                      <th>Vist Time</th>
                  </tr>
              </thead>
              <tbody>
              {props.data.UserGroup.map((person) => (
                    OwnerName = person.Name,
                    person.Animals.map((Animal) => ( 
                        Animalname = Animal.AnimalName,
                        breed = Animal.Breed,
                        Animal.Vists.map((vist,index) => (
                            <tr  key={index}  >
                                <td>  <i ></i> {OwnerName} </td>
                                <td> {Animalname}</td>
                                <td> {breed} </td>
                                <td> {vist.time} </td>
                            </tr>
                        )) 
                    )) 
                ))}

                <tr>
                  <td className='footer'> 
                      
                      </td>
                      <td className='footer'> 
                          
                      </td>
                      <td className='footer'>
                          
                          </td>
                      <td className='footer'>
                          <button className='TableButton'> Page 1</button>
                      </td>
                  </tr>
              </tbody>
          </table>

      </div>
    );
  }
  
  export default Hometable;