P
P
paketik0chaya2017-03-21 09:00:24
JavaScript
paketik0chaya, 2017-03-21 09:00:24

"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

1 answer(s)
M
Maxim, 2017-03-21
@paketik0chaya

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>
     )
}

ps for a productive study of react, I advise you to improve your knowledge of javascript

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question