file where it writes the error ItemUrgency:

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 should be the 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> ); } }

error itself: Warning: each "key" prop. Check the render method of ItemUrgency . See https://fb.me/react-warning-keys for more information.

  • one
    look at this answer, the very end: ru.stackoverflow.com/questions/589559/… - Duck Learns to Take Cover
  • It says in plain English that if you are trying to render an array (an array of yours in your case) it will be very useful to assign each key a key so that it works faster when this array has to be re-rendered. This is a voluntary matter and is unlikely to lead to performance problems. But in large lists I recommend to assign the key to the same - Duck Learns to Take Cover

1 answer 1

Read the answer here :

Keys help React identify which items have been added. It is a stable identity:

(transfer)

keys help React determine which items have been changed, added or deleted. keys must be given to elements in an array to ensure the uniqueness of the elements:

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

This is a uniquely identifiable code. Most often you would use IDs from your data as keys:

(transfer)

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

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