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, ments, setComments } = useContext(PatientContext);
const [ment, setComment] = useState('');

const mentInput = React.createRef();

const addComment = (e: any) => {
    const date = moment();
    setComments([..ments, { ment: mentInput.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='ments'>
                <div>
                    <p>
                        <h3 className='ments-text'>Comments:</h3>
                    </p>
                    <ul>
                        {ments.map(c =>                               
                            <li>
                                <div className='new-ment'>
                                    <div>
                                        <strong>{moment(c.date).format('ll')}</strong>
                                    </div>
                                    <div>
                                        {cment}
                                    </div>
                                </div>
                            </li>     
                        )}
                    </ul>
                </div>

                <div className='create-mentInput'>
                    <input value={ment} ref={mentInput} 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([..ments, { ment: mentInput.current.value, date: date }]);
    e.preventDefault();
    setComment('');  
};

How can I prevent this error from appearing?

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, ments, setComments } = useContext(PatientContext);
const [ment, setComment] = useState('');

const mentInput = React.createRef();

const addComment = (e: any) => {
    const date = moment();
    setComments([...ments, { ment: mentInput.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='ments'>
                <div>
                    <p>
                        <h3 className='ments-text'>Comments:</h3>
                    </p>
                    <ul>
                        {ments.map(c =>                               
                            <li>
                                <div className='new-ment'>
                                    <div>
                                        <strong>{moment(c.date).format('ll')}</strong>
                                    </div>
                                    <div>
                                        {c.ment}
                                    </div>
                                </div>
                            </li>     
                        )}
                    </ul>
                </div>

                <div className='create-mentInput'>
                    <input value={ment} ref={mentInput} 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([...ments, { ment: mentInput.current.value, date: date }]);
    e.preventDefault();
    setComment('');  
};

How can I prevent this error from appearing?

• javascript
• html
• css
• reactjs
• jsx

Share Improve this question Follow edited Jan 26, 2022 at 21:57 Dharman♦ 33.5k2727 gold badges101101 silver badges149149 bronze badges asked Jul 16, 2021 at 10:59 ArtemijArtemij 711 silver badge66 bronze badges 1

• List and keys. – Andy Commented Jul 16, 2021 at 11:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

{ments.map(c =>                               
  <li key={c.id}>
    <div className="new-ment">
      <div>
        <strong>{moment(c.date).format('ll')}</strong>
      </div>
      <div>
        {c.ment}
      </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 remended

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:

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

or accessing the index

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