Failed To "removechild" Coming In React While Dynamically Updating An Array

I am having an array 'personArray' in the state of my react component. I have a search bar in the component. Based on what I type in search bar, I make a request to an api and upda

Solution 1:

Using array index as key in .map is considered an antipattern, it is in the docs https://reactjs.org/docs/lists-and-keys.html. Reacts uses keys to understand what node is what and when order and amount of nodes change and indexes remain the same React might have hard time figuring out what is what. Try using some data that is unique for your persons. Maybe you have ID's in your database, that will do just fine.

Solution 2:

The only solution which worked for me was to wrap the map content in a table. Put each element of map inside a "tr" and render map in a table.

Something like this:

 <table className="item-table">
{this.state.personArray && this.state.personArray.map((item, i) => {
    return <tr  id={item.id}>
        <div className={`item ${this.state.activePersonRow === i ? "active" : ""}`}
             onClick={() => {
                 this.onPersonRowClick(i, item.name, item.id)
             }}>
            <div className="item-img" style={{backgroundImage:`url(${item.personframes.length !==0 ? item.personframes[0].file : ""})`}}></div>
            <div className="item-title">{item.name}<br/>
                <div className="item-sub">{item.occupation}</div>
            </div>
            <div className="item-count">{item.personframes.length}</div>
        </div>
    </tr>
})}
</table>

For some reason the was giving error. Put it in a table solved the issue. If someone has the reason for why such behaviour was occurring then please suggest.