This is the code in function (my trigger is button) The filter is filterKeyword and nameArea: projectData is the Result from the onl oad API Data

function filter() {

    let filteredResults = projectData.filter(f => f.ProjectName.includes(filterKeyword) && f.PartitionKey.includes(nameArea));
    console.log(filteredResults);

    const filteredList = filteredResults.map((item) =>
        <li> key={item.RowKey}

        </li>
    );

    return (
        <ul>{filteredList}</ul>
    );

};

This is the Array index from FilteredResults:

 [
  {
    "RowKey": "6934",
    "ProjectName": "Sku portfolio optimization Industrial Adhesives Systems (IAS)",
    "LeadDivision": "All Safety & Industrial Division",
    "LeadBusiness": "Safety & Industrial Business Group",
    "PartitionKey": "EMEA",
    "people": []
  }
]

The error in console:

index.js:1 
        
       Warning: Each child in a list should have a unique "key" prop.

UPDATE: i got it on mapping but this is the format:

const filteredList = filteredResults.map((item, index) =>
        <li key={index}>{item.RowKey}{item.ProjectName}{item.PartitionKey}{item.ProjectStatus}</li>

    );

I got the 4 indexes on children array

0:
    $$typeof: Symbol(react.element)
    key: "0"
    props:
    children: Array(4)
    0: "6934"
    1: "Sku portfolio optimization Industrial Adhesives Systems (IAS)"
    2: "EMEA"
    3: "Tracking Complete"
    length: 4
    [[Prototype]]: Array(0)
    key: (...)
    get key: ƒ ()
    [[Prototype]]: Object
    ref: null
    type: "li"
    _owner: null
    _store: {validated: false}
    _self: undefined .....

CodePudding user response：

 const filteredList = filteredResults.map((item, index) =>
        <li key={index}>{item.RowKey}</li>
    );

Try this