React array or iterator should have a unique "key" prop? Please take a look at it.

in order to make every three pictures into a set of pictures, the outer package is marked with a DIV tag.
wrote a utility function filterArray to divide the original array into two arrays. Key and item (each item) are not rendered when map is ergodic, but console.log can come out.
system error Each child in an array or iterator should have a unique "key" prop.
for guidance, thank you

import React, {Component} from "react";
import TactiveItem from".. / tactiveitem/views";
import". / index.css";

/ / every three Filter is a group of
let filterArray = (source, count) = > {
let arr = [];
for (let ionomer < len;i+=3) {

   arr.push(source.slice(i,i+3));

}
return arr;
}

class TactiveList extends Component {

constructor (props) {

super(props);

this.state = {
    title: "",
    listData: [
        {
            id:   "1",
            pic:  "p29/201302/28/3d20251a1b60350a93835fbb",
            tag:  "",
            text: "",
            fav:  "8251",
            istag: true
        },
        {
            id:   "2",
            pic:  "p70/1809/e7/4941057a6aae702",
            text: "",
            fav:  "5775"
        },
        {
            id:   "3",
            pic:  "p60/1809/f4/d19e9608d2d1a002",
            text: "",
            fav:  "8355"
        },
        {
            id:   "4",
            pic:  "p48/201302/28/bc44faa497db0dcf93835fbb",
            text: "",
            fav:  "8436"
        },
        {
            id:   "5",
            pic:  "p49/201302/28/f7876853b1e2279d93835fbb",
            text: "",
            fav:  "5568"
        },
        {
            id:   "6",
            pic:  "p5/1411/67/677f3ca100291a23213a9cdb",
            text: "",
            fav:  "8436"
        }
    ],
    filterItems: []
};

}

render () {

let listData = this.state.listData;                 //
this.state.filterItems = filterArray(listData, 3);  //
/*
**item:[
        {"id":"1","pic":"p29/201302/28/3d20251a1b60350a93835fbb","tag":"","text":"","fav":"8251","istag":true},
        {"id":"2","pic":"p70/1809/e7/4941057a6aae702","text":"","fav":"5775"},
        {"id":"3","pic":"p60/1809/f4/d19e9608d2d1a002","text":"","fav":"8355"}
    ]
**item:[
        {"id":"4","pic":"p48/201302/28/bc44faa497db0dcf93835fbb","text":"","fav":"8436"},
        {"id":"5","pic":"p49/201302/28/f7876853b1e2279d93835fbb","text":"","fav":"5568"},
        {"id":"6","pic":"p5/1411/67/677f3ca100291a23213a9cdb","text":"","fav":"8436"}
    ]
**
*/
return (
  <div className="m-dest m-dest-default">
    <h5 className="title">{this.state.title}</h5>
    <div className="list">
        {
            this.state.filterItems.map((item) => {
                //Each child in an array or iterator should have a unique "key" prop.
                return <div><TactiveItem key={item.id} itemData={item} /></div>        
            })

        }
    </div>
  </div>
);

}
}

export default TactiveList;

problem description

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

Sep.30,2021

this.state.filterItems.map((item, index) => {
                //Each child in an array or iterator should have a unique "key" prop.
                return <div key={index}><TactiveItem itemData={item} /></div>        
            })

change the location of key


this.state.filterItems.map(item => {
    //Each child in an array or iterator should have a unique "key" prop.
    return <TactiveItem key={item.id} itemData={item} />       
})

remove the outer div


finally solved by myself, json format is a multi-dimensional array, traversing map, twice succeeded.


this.state.filterItems.map((item, index) => {
                //Each child in an array or iterator should have a unique "key" prop.
                return <div key={index}><TactiveItem  itemData={item} /></div>        
            })
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf5591-312ca.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf5591-312ca.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?