reactjs – I can't understand why react writes an error in the console

Question:

the file where the ItemUrgency error is written:

import React, {Component} from 'react';
import {
Button
} from 'reactstrap';
//import views
import DeleteProblem from '../Modals/DeleteProblem';

export default class ItemUrgency extends Component {
constructor(props) {
    super(props);
    this.state = {
        editing: false,
        urgency: this.props.urgency
    };
}

handleClick = () => {
    this.setState({
        editing: !this.state.editing
    });
};

render(){
    return(
        <tr>
            {!this.state.editing ? [
                <td>{this.props.urgency.problem}</td>,
                <td>{this.props.urgency.time}</td>,
                <td className='text-center'>
                    <Button color='primary' onClick={this.handleClick}>редактировать</Button>
                </td>
            ] : [
                <td><input className='form-control' type='text' value={this.props.urgency.problem}/></td>,
                <td><input className='form-control' type='text' value={this.props.urgency.time}/></td>,
                <td className='text-center'>
                    <Button color='success' onClick={this.handleClick}>сохранить</Button>
                </td>
            ]}
            <td className='text-right'>
                <DeleteProblem/>
            </td>
        </tr>
    );
}
}

the file where the iteration takes place and, according to the idea, there should be an ItemsUrgency key:

import React, {Component, PropTypes} from 'react';

//import views
import ItemUrgency from './ItemUrgency';


export default class ItemsUrgency extends Component {
constructor(props) {
    super(props);
    this.state = {
        editing: false,
        urgency: this.props.urgency
    };
}
static propTypes = {
    urgency: PropTypes.array
};

handleClick = () => {
    this.setState({
        editing: !this.state.editing
    });
};

render(){
    return(
        <tbody>
            {this.state.urgency.map((item) =>
                <ItemUrgency key={item.item} urgency={item} />
            )}
        </tbody>
    );
}
}

the error itself: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ItemUrgency . See https://fb.me/react-warning-keys for more information.

Answer:

Read the answer here :

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

(translation)

keys help React determine which elements have been changed, added, or removed. keys must be given to the elements in the array to ensure that the elements are unique:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:

(translation)

The best way to choose key is to use a string that uniquely identifies the list item from the rest. Most often, identifiers from your data are used as keys:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);