Missing "key" prop for element in iterator react/jsx-key in React

Question

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?

List and keys.

Andy
– Andy

2021-07-16 11:05:58 +00:00
Commented Jul 16, 2021 at 11:05 — Andy
– Andy, Commented Jul 16, 2021 at 11:05

Nikita Mazur · Accepted Answer · 2021-07-16 11:12:06Z

3

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

edited Jul 16, 2021 at 11:12

answered Jul 16, 2021 at 11:03

Nikita Mazur

1,7971 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

omkobass · Accepted Answer · 2021-07-16 11:26:49Z

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

Collectives™ on Stack Overflow

Missing "key" prop for element in iterator react/jsx-key in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related