Answer the question
In order to leave comments, you need to log in
"Warning: Each child in an array or iterator should have a unique "key" prop." How to fix?
Error: Warning: Each child in an array or iterator should have a unique "key" prop.
I can't figure out how to fix it.
Just started learning React and axios.
import React, {Component, PropTypes} from 'react';
import {Link} from 'react-router';
import axios from 'axios';
class Admin extends Component {
constructor() {
super();
this.fetchDistricts = this.fetchDistricts.bind(this);
this.fetchTag = this.fetchTag.bind(this);
this.fetchField = this.fetchField.bind(this);
this.state = {
districtList: [],
tagList: [],
fieldList: [],
}
}
componentDidMount() {
this.fetchDistricts();
this.fetchTag();
this.fetchField();
}
fetchDistricts()
{
axios('http://46.236.137.153/district', {
responseType: 'json'
})
.then(function (response) {
console.log(response);
return(data => this.setState({districtList: data}))
})
.catch(function (error) {
console.log(error);
})
}
renderDistrict(item, key) {
return (
<tr key ={key} className="districts">
<td>{item.id}</td>
<td>{item.name}</td>
</tr>
)
}
render(){
const {districtList, tagList, fieldList} = this.state;
const districts = districtList.map(item => this.renderDistrict(item));
return (
<form className="form-admin">
<div className="col-md-8">
<ul className="nav nav-tabs">
<li><a href="#tab2" data-toggle="tab">Районы</a></li>
<div className="admin_operation">
<Link name="add_field" to='articles' className="admin_add">Добавить</Link>
</div>
</ul>
<div className="tab-content">
<div className="tab-pane" id="tab2">
<table id="district" className="table_district">
<thead>
<tr>
<th>ID</th>
<th>Район</th>
</tr>
</thead>
<tbody>
{ districts }
</tbody>
</table>
</div>
</div>
</div>
</form>
);
}
}
export default Admin;
Answer the question
In order to leave comments, you need to log in
The error is that you don't pass the key, but you try to set it to
Your function takes 2 arguments, and you pass only one here:
However, since you have an id, your task is solved like this:
renderDistrict(item) {
return (
<tr key ={item.id} className="districts">
<td>{item.id}</td>
<td>{item.name}</td>
</tr>
)
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question