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

Possible duplicate of [How to create unique keys for React elements?](https://stackoverflow.com/questions/39549424/how-to-create-unique-keys-for-react-elements) — Amanshu Kataria, Mar 03 '18 at 16:21

Amanshu Kataria · Answer 1 · 2018-03-03T16:19:14.047

0

Just use the following code:

myNotes.map((dynamicData)=>{return <Component key={dynamicData._id} />;})

edited Mar 03 '18 at 16:19

answered Mar 03 '18 at 16:13

Amanshu Kataria

2,838
7
23
38

Omar · Accepted Answer · 2018-03-03T16:43:55.727

0

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

edited Mar 03 '18 at 16:43

answered Mar 03 '18 at 16:25

Omar

3,401
2
23
40

Why install a library for this when you can do it in multiple other simple ways? – Amanshu Kataria Mar 03 '18 at 16:30
Thank you so much ! – ANUBIS Mar 03 '18 at 17:08
You're very welcome if you found my answer useful please upvote it. – Omar Mar 03 '18 at 17:16
1

i did but im under a 15 reputation so it's not publicly shown. – ANUBIS Mar 03 '18 at 17:25

score 0 · Answer 3 · answered Mar 03 '18 at 16:57

Only the parent element of each iteration needs to be keyed. You can set a key on the <Fragment> element, as explained in the docs.

As for the key itself, you can use any of the methods suggested here, but I think some may be a bit overkill, since creating an unique key can be an one liner which you can put wherever you find suitable (i.e., utility library, class method...):

uniqueId = () => Math.random().toString(36).substr(2, 9)

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

3 Answers3