Reactjs - Each child in an array or iterator should have a unique "key" prop. How to do that dynamically?

Question

I know what the warning means, but how to actually make a dynamic key value?

I tried various methods but none worked. Maybe I can do a key value in each object in mongoose schema but is it a bad practice? I mean in real world apps what do they do?

my component render

  render(){
        const myNotes = this.state.Data;
        const listItems = myNotes.map((dynamicData)=>{
      return(
        <Fragment>
          <h3 className='col-12 title' key="12">{dynamicData._id}</h3>
            <div className=' col-6' key="13">
              <ul className ='list-unstyled ' key="1">
              <li className='items' key="2">items</li>
                <li key="3">{dynamicData.firstItem}</li>
                <li key="4">{dynamicData.secondItem}</li>
                <li key="5">{dynamicData.thirdItem}</li>
                {/* <li>Total Budget :</li> */}
              </ul>
            </div>

            <div className='dynamicData col-6' key="6">
              <ul className ='list-unstyled' key="7">
                <li className='prices' key="16">Prices</li>
                <li key="8">{dynamicData.firstPrice} {dynamicData.currency}</li>
                <li key="9">{dynamicData.secondPrice} {dynamicData.currency}</li>
                <li key="10">{dynamicData.thirdPrice} {dynamicData.currency}</li>
              </ul>
            </div>
            <h3 className='col-12 totalprice' key="11">{dynamicData.tBudget} EGP</h3>
        </Fragment>
        )
    })

      return (
         <div className=' col-6 myNotesList ' key="14">
            <div className='row inNotesList' key="16">
          {listItems}
         </div>
         </div>
        )
    }

Mongoose Schema

var listSchema = new mongoose.Schema({
  currency:{
    type: String,
    required: true,
    minlength:3,
    default: "EGP"
  },
  _creator: {
    type: mongoose.Schema.Types.ObjectId,
    required: true
  },
  _id: {
    type: String,
    required: true,
    minlength: 1,
    trim: true
  },
  firstItem: {
    type: String,
    required: true,
    minlength: 1,
    trim: true
  },
  firstPrice:{
    type: Number,
    required: true,
    minlength: 1,
    default: null
  },
  secondItem: {
    type: String,
    required: true,
    minlength: 1,
    trim: true
  },
  secondPrice:{
    type: Number,
    required: true,
    minlength: 1,
    default: null
  },
  thirdItem: {
    type: String,
    required: true,
    minlength: 1,
    trim: true
  },
  thirdPrice:{
    type: Number,
    required: true,
    minlength: 1,
    default: null
  },
  tBudget:{
    type: Number,
    required: true,
    minlength: 1,
    default: null
  }
});

Answer 1

npm install uuid

uuid will generate a unique key, now wherever you create a note object add an id to each note and call uuidv4().

 makeNote = () => {
 const uuidv4 = require('uuid/v4');
 const note = {note:"hello", id:uuidv4() }
 return note;
 }

When you map through your notes just do notes.map(item => <div key={item.id}> {item.note} </div>

Alternative to uuid you can use a function like

getNoteId = () => Math.floor(Math.random() * (9999-1)) + 1;

then do inside the makeNote function const note = { note:"hello", id:this.getPostId() };