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 ponent 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 ponent 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 ponent. 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 class="bi bi-person-fill"></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?
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 ponent 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 ponent 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 ponent. 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 class="bi bi-person-fill"></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?
4 Answers
Reset to default 9Try 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 class="bi bi-person-fill"></i> {OwnerName} </td>
<td> {Animalname}</td>
<td> {breed} </td>
<td> {vist.time} </td>
</tr>
))
))
))}
It's remended to use keys ing from the data source such as visit.id. Last resort should be using index. For more information you can read here.
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 class="bi bi-person-fill"></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;
In my opinion:
const array = [...];
...
const new_array_for_props = array.map(function(arr, index){
<target_p props_01={arr.props_01} key={index} />
});
sub ponent(target_p) unnecessary uses props.key.
Every time you are in a loop, each element like those ones must define a unique key. And it is a good practice
- tr
- ul
- Component
- etc ...
ex:
Users?.map( (user: User) => (
<tr key={user.id}>
<td>{user.name}</td>
<td>{user.birthdate}</td>
<td>
<UserEdit key={user.id} user={user}>Edit</UserEdit>
</td>
...
</tr>
));