1

What's wrong with my below code? I had key={obj._id} and I expect I will not see the warning but I'm still getting it.

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method..

renderListItems(items){
        return(
            <div>
            {map(items, obj =>
                <div key={obj._id} className="panel-body panel-row">
                    <div  className="row">
                        <div className="col-md-12">
                            <h2 className="title">{obj.display_name}</h2>
                            <p className="edited">Last edited on {moment(obj.updated_at).format('DD MMM YYYY')}</p>
                            <div className="actions_wrap">
                                <Link to={`/mall-promospace/edit/${obj._id}`}>Edit</Link>
                                <a onClick={()=> this.setState({openConfirmationModal:true, selectedItemId: obj._id, selectedItemName: obj.display_name})}>Delete</a>
                            </div>
                        </div>
                    </div>
                </div>
            )}
            </div>
        )
    }
Alan Jenshen
  • 3,159
  • 9
  • 22
  • 35
  • 3
    The first question, of course, is "are you sure your _id fields are unique?" – speckledcarp May 14 '17 at 02:50
  • This code on its own looks fine, so either the error is being generated from a different iterator, or two or more of your ids are duplicated. – Jivings May 14 '17 at 02:56
  • @speckledcarp yes. And Jivings I don't have duplicated ids. – Alan Jenshen May 14 '17 at 03:17
  • What does the render method look like? Maybe nothing wrong there... but the error does point you to a different method than the one you have in the question... – bluetoft May 14 '17 at 03:23
  • Error message seems incomplete...it should be..`.....Check the render method of ..`. – Hardik Modha May 14 '17 at 03:49
  • If you have multiple methods being called from `render()` method and you are unsure about which method is causing the error, you can comment out the specific method and see if error is gone. This way you can pin point the error. – Hardik Modha May 14 '17 at 04:02
  • Can you show the contents of that `map` function? In case it's masking some strange goings on. – Jivings May 14 '17 at 04:18

2 Answers2

0

I think you are coding some things wrong. You should apply the function "map" over an array.

Try this:

renderListItems(items){
        return(
            <div>
            {items.map(obj =>
                <div key={obj._id} className="panel-body panel-row">
                    <div  className="row">
                        <div className="col-md-12">
                            <h2 className="title">{obj.display_name}</h2>
                            <p className="edited">Last edited on {moment(obj.updated_at).format('DD MMM YYYY')}</p>
                            <div className="actions_wrap">
                                <Link to={`/mall-promospace/edit/${obj._id}`}>Edit</Link>
                                <a onClick={()=> this.setState({openConfirmationModal:true, selectedItemId: obj._id, selectedItemName: obj.display_name})}>Delete</a>
                            </div>
                        </div>
                    </div>
                </div>
            )}
            </div>
        )
    }
Pablo Darde
  • 5,844
  • 10
  • 37
  • 55
0
items.map((obj, i) => <div key={i}></div>)
Michael Mammoliti
  • 1,517
  • 13
  • 11