anyone know how to make a flatlist reset id number after I remove 1 item from it

Question

like my title said I struggle with this though below is a example

{ id: '1', name: 'one' },
    { id: '2', name: 'two' },
    { id: '3', name: 'three' },
    { id: '4', name: 'four' },

this is a flatlist after I remove item with id '2' I want id 3 become 2 and id 4 become 3 so the flatlist after id 2 be removed will like

{ id: '1', name: 'one' },
        { id: '2', name: 'three' },
        { id: '3', name: 'four' },

here is my code

export default function Listdata({ route }) {
    const [itemData, newItem] = React.useState([]);

    const [itemState, setItemState] = React.useState(itemData);
    const [idmoi, incr,] = React.useState(1);
    const [textNhapVao, setTextNhapVao] = React.useState('');


    const tinhToanId = (t) => {
        var idNew = [itemData.id];
        incr(idNew - 1);
    }


    const themItem = () => {
        var arrayMoi = [...itemData, { id: idmoi, name: textNhapVao }];
        incr(idmoi + 1)
        console.log('idddd')
        console.log(idmoi)
        setItemState(arrayMoi);
        newItem(arrayMoi);
    }
    <View>

    </View>

    const keyboardVerticalOffset = Platform.OS === 'ios' ? 40 : 0

    const xoaItem = (IItem) => {
        console.log('routeeee')
        console.log(route.params.paramKey)
        setItemState(prevItemState => prevItemState.filter((_item, _Index) => _Index !== IItem));
    }
    return (
        <Container style={styles.container}>
            <View style={{
                alignItems: 'center',
                justifyContent: 'center',
                borderBottomWidth: 1,
                borderColor: '#d7d7d7',
            }}>
                <Text style={{ fontWeight: 'bold', fontSize: 30, color: 'green' }}>Xin Chào {route.params.paramKey}</Text>
            </View>
            <FlatList
                data={itemState}
                keyExtractor={(item, index) => index}
                renderItem={({ item, index }) => (
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                        <View style={{ marginLeft: 20 }}>
                            <Text style={{ fontSize: 30, color: 'red' }} >{item.id}{'\n'}{item.name}</Text>
                        </View>
                        <View style={{ justifyContent: 'center', marginRight: 20 }}>
                            <TouchableOpacity
                                style={{
                                    width: '100%',
                                    backgroundColor: 'red',
                                }}
                                activeOpacity={0.7}
                                onPress={() => xoaItem(index)}
                            >
                                <IconFE name='trash-2' size={30} style={{ color: 'orange' }} />
                            </TouchableOpacity>
                        </View>
                    </View>
                )}
            />
            <View
                style={{
                    position: 'relative', height: 50,
                    borderTopWidth: 1,
                    borderColor: '#d7d7d7',
                }}>
                <KeyboardAvoidingView enabled behavior={Platform.OS === "ios" ? "padding" : null} keyboardVerticalOffset={keyboardVerticalOffset} >
                    <View
                        style={{
                            alignItems: 'center', position: 'relative',
                            flexDirection: 'row',
                            justifyContent: 'space-between',
                            marginLeft: 20,
                            marginRight: 20,
                        }}>
                        <Input
                            onChangeText={data => setTextNhapVao(data)}
                            placeholder='Nhập Vào Đây'></Input>
                        <TouchableOpacity
                            title="Thêm"
                            onPress={themItem}>
                            <IconFE name='check-square' size={30} style={{ color: 'blue' }} />
                        </TouchableOpacity>
                    </View>
                </KeyboardAvoidingView>
            </View>
        </Container>
    )
}

and below is my screenshot flatlist: https://uphinh.org/image/9OLoCN

Answer 1

You could take a function which removes the object at the given index.

The function takes the removed array, takes the object at start and gets the id then it loops from the index until the end and updates all id properties.

const
    remove = (array, index) => {
        let removed = array.splice(index, 1);

        if (!removed.length) return array;
        let id = +removed[0].id;
        while (index < array.length) array[index++].id = (id++).toString();
        return array;
    },
    data = [{ id: '1', name: 'one' }, { id: '2', name: 'two' }, { id: '3', name: 'three' },  { id: '4', name: 'four' }];

remove(data, 1);

console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }