Warning: Each child in an array or iterator should have a unique “key” prop

问题:

G'Day. I want to iterate over a bunch of JSON objects and turn them into React Elements. The objects look like this

                                "fields":                                     [                                         {                                                key: "testname",                                             "name": "testname",                                             "altName": "",                                             "visible": true,                                             "groupVisibility": "public",                                             "type": "text",                                             "component": "input",                                             "label": "Test Smart Input",                                             "placeholder": "Some default Value",                                             "required": "required",                                             "validated": false,                                             "data": []                                         },                                         {                                                key: "password",                                             "name": "password",                                             "altName": "",                                             "visible": true,                                             "groupVisibility": "public",                                             "type": "password",                                             "component": "input",                                             "label": "Test Smart Input",                                             "placeholder": "Password",                                             "required": "required",                                             "validated": false,                                             "data": []                                         }                                     ]

And the code that iterates over them is quite simple. Such:

//-------------------- formFields(fieldsIn) {       const fieldsOut = [];                                           // ARRAY of FORM ELEMENTS to return     console.log('doin fields');     for (var fieldIn in fieldsIn) {                                 // array of FORM ELEMENT descriptions in JSON         console.log(fieldIn);         let field = React.createElement(SmartRender,                // go build the React Element                                          fieldIn,                                         null);                      // lowest level, no children, data is in props              console.log('doin fields inside');         fieldsOut.push(field);     }     return(fieldsOut);                                              // this ARRAY is the children of each PAGE }

And I get the error Warning: Each child in an array or iterator should have a unique "key" prop. Any hints? Cheers

I changed the code to do this.

//-------------------- formFields(fieldsIn) {       const fieldsOut = [];                                           // ARRAY of FORM ELEMENTS to return     console.log('doin fields');     for (var fieldIn in fieldsIn) {                                 // array of FORM ELEMENT descriptions in JSON         console.log(fieldIn);         let field = React.createElement(SmartRender,                // go build the React Element                                          {key: fieldsIn[fieldIn].name, fieldIn},                                         null);                      // lowest level, no children, data is in props              console.log('doin fields inside');         fieldsOut.push(field);     }     return(fieldsOut);                                              // this ARRAY is the children of each PAGE }

And I get the same error. I don't understand why! Fixed! Thanks for the help.

Here is the code.

    //--------------------     formFields(fieldsIn) {           const fieldsOut = [];                                           // ARRAY of FORM ELEMENTS to return         for (var fieldIn in fieldsIn) {                                 // array of FORM ELEMENT descriptions in JSON             console.log(fieldIn);             let field = React.createElement(SmartRender,                // go build the React Element                                              {key: