React 中的迭代器 react/jsx-key 中缺少元素的“key”属性

Question

I am new to React, and I'm trying to clear input when i press <button onClick={addComment} className='add-btn'>+</button> Missing "key" prop for element in iterator react/jsx-key

import React, { useContext, useState } from 'react';
import ContentHeader from './PatientHeader';
import { PatientContext } from '../App';
const moment = require('moment');

const ContentInfo = () => {
const { selectedPatient, comments, setComments } = useContext(PatientContext);
const [comment, setComment] = useState('');

const commentInput = React.createRef();

const addComment = (e: any) => {
    const date = moment();
    setComments([...comments, { comment: commentInput.current.value, date: date }]);
    e.preventDefault();
    setComment('');  
};

const handleChange = (e: any) => setComment(e.target.value);

return (
    <div className='content'>

        <ContentHeader />

        <div className='info'>
            <div className='comments'>
                <div>
                    <p>
                        <h3 className='comments-text'>Comments:</h3>
                    </p>
                    <ul>
                        {comments.map(c =>                               
                            <li>
                                <div className='new-comment'>
                                    <div>
                                        <strong>{moment(c.date).format('ll')}</strong>
                                    </div>
                                    <div>
                                        {c.comment}
                                    </div>
                                </div>
                            </li>     
                        )}
                    </ul>
                </div>

                <div className='create-commentInput'>
                    <input value={comment} ref={commentInput} onChange={handleChange} 
                     className='form-control' type="text"/>
                    <button onClick={addComment} className='add-btn'>+</button>
                </div>

            </div>  
                         
        </div>
    </div>
);
}

The following line is throwing the error, and I cannot figure out why:

(e: any)

const addComment = (e: any) => {
    const date = moment();
    setComments([...comments, { comment: commentInput.current.value, date: date }]);
    e.preventDefault();
    setComment('');  
};

How can I prevent this error from appearing?

It looks like your post is mostly code; please add some more details. Thanks a lot Stackoverflow i tried but i cant

Answer 1

When you use map to render list of components you must provide a unique key prop to rendered component - in your case you must provide key prop to <li> .

{comments.map(c =>                               
  <li key={c.id}>
    <div className="new-comment">
      <div>
        <strong>{moment(c.date).format('ll')}</strong>
      </div>
      <div>
        {c.comment}
      </div>
    </div>
  </li>
)}

Keep in mind your key prop must be unique within your data, if for some reason it is impossible for you, you can use index from Array.map method, but it's not recommended

Answer 2

In order for react to be faster you should not avoid this warning and put the key prop to a tag (in this case it's li). Key prop should be either an index or the id of the object, keys should not have duplicates.

You can resolve this with two different approaches:

{comments.map(c =>                               
  <li key={c.id}>
    <div className="new-comment">
      <div>
        <strong>{moment(c.date).format('ll')}</strong>
      </div>
      <div>
        {c.comment}
      </div>
    </div>
  </li>
)}

or accessing the index

{comments.map((c, index) =>                               
  <li key={index}>
    <div className="new-comment">
      <div>
        <strong>{moment(c.date).format('ll')}</strong>
      </div>
      <div>
        {c.comment}
      </div>
    </div>
  </li>
)}