Attempting to generate a table using ReactJS and within this table I want to have a unique key to identify each row (as remended by ReactJS). The following code runs and generates the table I desire except with the following error:
Warning: 'Each child in an array or iterator should have a unique "key" prop'
Looking at my generated HTML the 'key' field indeed does not exist. I've also tried key={index} but it doesn't work either
export class Tablecontent extends Component{
constructor(props){
super(props);
this.state={
fileinfo:'null'
}
}
render(){
//const fileinfo = this.props.rows;
const fileinfo = ['myFile1.doc','myFile2.doc'];
var row='';
console.log("FILEINFO:"+fileinfo);
if(fileinfo=='null')
{
row ='';
}
else {
row = fileinfo.map((data,index) =>
<tr>
<td key="filename_{index}">{data}</td>
<td key="date_{index}">2/12/2017</td>
<td key="size_{index}">2.1 MB</td>
</tr>
);
}
return(
<div>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Date Created</th>
<th>Size</th>
</tr>{row}</tbody>
</table>
</div>
);
}
}
Resulting HTML:
<table>
<tbody>
<tr><th>Name</th><th>Date Created</th><th>Size</th></tr>
<tr><td>myFile1.doc</td><td>2/12/2017</td><td>2.1 MB</td></tr>
<tr><td>myFile2.doc</td><td>2/12/2017</td><td>2.1 MB</td>
</tr>
</tbody>
</table>
Attempting to generate a table using ReactJS and within this table I want to have a unique key to identify each row (as remended by ReactJS). The following code runs and generates the table I desire except with the following error:
Warning: 'Each child in an array or iterator should have a unique "key" prop'
Looking at my generated HTML the 'key' field indeed does not exist. I've also tried key={index} but it doesn't work either
export class Tablecontent extends Component{
constructor(props){
super(props);
this.state={
fileinfo:'null'
}
}
render(){
//const fileinfo = this.props.rows;
const fileinfo = ['myFile1.doc','myFile2.doc'];
var row='';
console.log("FILEINFO:"+fileinfo);
if(fileinfo=='null')
{
row ='';
}
else {
row = fileinfo.map((data,index) =>
<tr>
<td key="filename_{index}">{data}</td>
<td key="date_{index}">2/12/2017</td>
<td key="size_{index}">2.1 MB</td>
</tr>
);
}
return(
<div>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Date Created</th>
<th>Size</th>
</tr>{row}</tbody>
</table>
</div>
);
}
}
Resulting HTML:
<table>
<tbody>
<tr><th>Name</th><th>Date Created</th><th>Size</th></tr>
<tr><td>myFile1.doc</td><td>2/12/2017</td><td>2.1 MB</td></tr>
<tr><td>myFile2.doc</td><td>2/12/2017</td><td>2.1 MB</td>
</tr>
</tbody>
</table>
- the key should be in the root element of your iterations – Sagiv b.g Commented Dec 21, 2017 at 16:54
1 Answer
Reset to default 15It wants to see the key on the outer element returned in the map function as below. The key is for React's internal use and won't display in the html.
row = fileinfo.map((data,index) =>
<tr key={index}>
<td key="filename_{index}">{data}</td>
<td key="date_{index}">2/12/2017</td>
<td key="size_{index}">2.1 MB</td>
</tr>
);