how to delete array data according to a certain index in reactjs [duplicate]

React detects the changes by comparing the keys. It is not recommended to have index as key, especially when the array is involved in deletion operation. Can you please try setting the tech itself as key instead of index. like this.

 <div className='flex' key={tech} index={index}>

Seems the issue lies in the use of index from map function. To use this, it needs to re-render the components whenever an item is deleted. I am not sure this logic has been implemented since I cannot see the whole code. It would be good if you can provide full code in this component. BTW, what is the best approach is to use the id in the technologies object array itself if it has.

It seems you're parsing 'index' to an unknown prop for the div element <div ... index={index} />

You only have to parse the 'index' to the 'key' property of the div element so React can track each object of the array.

However, for the <UploadTechnology /> component, you have a custom 'index' property which you're probably using to track each object and respond to them in the component to render its children dynamically, which is fine.

Here's my suggestion:

{technologies.map((tech, index) => {
   <div className='flex' key={index}>
     ...
   </div>
))}

Simple change this

<div className='flex' key={tech?.id + index}>

Or can change and update functions

import React from 'react';
import {cloneDeep, findIndex, remove} from 'lodash';

const handleDeleteTechnology = (tech) => {
    const newTechs = cloneDeep(technologies);
    let textIdx = findIndex(newTechs, {id: tech.id});
    if ( textIdx !== -1) {
        // newTechs.splice(textIdx, 1);
        // or
        remove(newTechs, {id: tech.id})
        setTechnologies(newTechs);
    }

    const newDetails = cloneDeep(detailTechData);
    let detailIdx = findIndex(newDetails, {id: tech.id});
    if ( detailIdx !== -1) {
        // newDetails.splice(detailIdx, 1);
        // or
        remove(newDetails, {id: tech.id})
        setDetailTechData(newDetails);
    }

    return setFilesTech(prevFilesTech => {
        const newFilesTech = cloneDeep(prevFilesTech);
        let fileIdx = findIndex(newFilesTech, {id: tech.id});
        if ( fileIdx !== -1) {
            // newFilesTech.splice(fileIdx, 1);
            // or
            remove(newFilesTech, {id: tech.id})
            return newFilesTech;
        } else {
            return prevFilesTech;
        }
    });
};

return <div>
    {
        technologies?.map((tech, index) => (
            <div className='flex' key={tech?.id + index}>
                <div className='relative'>
                    <FaCircleMinus size={25} className='absolute -top-2 -left-2 text-red-600' onClick={() => handleDeleteTechnology(tech)}/>
                </div>
                <UploadTechnology
                    index={index}
                    technology={tech}
                    onImageChange={(index, imageUrl) => handleImageChange(index, imageUrl)}
                />
            </div>
        ))
    }
</div>

1. Use filter in place of splice.

2. Maintain constancy in your code. as i have suggest you in below code so you can maintain easily.

3. Don't return unnecessarily. as you have returned setFilesTech in handleDeleteTechnology.

    const handleDeleteTechnology = (index) => {
   
        setTechnologies((prevTechnologies) => {
            const updatedTechnologies = [...prevTechnologies.filter((item, i) => i !== index)];
            return updatedTechnologies;
        });
   
        setDetailTechData((prevDetailTechData) => {
            const updatedDetailTechData = [...prevDetailTechData.filter((item, i) => i !== index)];
            return updatedDetailTechData;
        });
   
        setFilesTech(prevFilesTech => {
            const updatedFilesTech = [...prevFilesTech.filter((item, i) => i !== index)];
            return updatedFilesTech;
        });
    };
   
   
   
        {
            technologies.map((tech, index) =>
                <div className='flex' key={index} index={index}>
                    <div className='relative'>
                        <FaCircleMinus size={25} className='absolute -top-2 -left-2 text-red-600' onClick={() => { handleDeleteTechnology(index) }} />
                    </div>
                    <UploadTechnology index={index} technology={tech} onImageChange={(index, imageUrl) => { handleImageChange(index, imageUrl) }} />
                </div>
            )
        }