hi, here I want to edit the saved todo in flat-list. I can't resolve pls help

CodePudding user response：

could you show the code that you currently have.

CodePudding user response：

my Code

const Todo = () => {
const [isModalVisible, setModalVisible] = useState(false);
const [brand, setbrand] = useState("");
const [title, settitle] = useState("");
const [price, setprice] = useState("");
const [edit, setEdit] = useState({});
const [ToatalData, setToatalData] = useState([]);
const [Data, setData] = useState([

  
    {
        brand: 'hithub', type: 'leather bag',
        name: 'stylish handbag', price: '300/-',
    },

])


const hanldeBackPress = () => {
    setModalVisible(false);
}

const handleChangeBrand = (val) => {
    console.log(val,'brandUPPP');
    setbrand(val)
}

const handleChangeTitle = (val) => {
    settitle(val)
}

const handleChangePrice = (val) => {
    setprice(val)
}

const handleEdit = (item) => { setModalVisible(true); setbrand(item.brand); setprice(item.price); settitle(item.name); setEdit(item); handleUpdatedDta(edit); }

const handleUpdatedDta = () =>{
    const res ={
        brand: brand,
        name: title,
        price: price
    }
    console.log(res,'res'); 
   let result = Data.map((val)=>{
        return val.brand == edit.brand ? {...val,...res} : val
    })
    setData(result)
}

const handleSaveData = () => {
    Data.push({
        "brand": brand,
        "name": title,
        "price": price
    })
    setToatalData(Data)
    console.log(ToatalData, 'loggg');
    setModalVisible(false)
    setbrand('')
    settitle('')
    setprice('')
}
const handleDelete = (brand) => {
    const newTask = Data.filter(item => item.brand != brand);
    setData(newTask);
}
return (

    <View style={{ flex: 1 }}>

        <Button title="Add" onPress={() => setModalVisible(!isModalVisible)}/>
        <View>
            <FlatList
                data={Data}
                renderItem={({ item }) => (
                    <View >
                        <View style={{ margin: 15, marginTop: 15 }}>
                            {/* <Image style={{height:150, width:150}} source={item.productImage}/> */}
                            <Text > Brand : {item.brand} </Text>
                            <Text > Type :{item.name} </Text>
                            <Text> Cost : {item.price} </Text>
                        </View>
                        <View style={{ position: 'absolute', right: 150, top: 15, }}>
                            <TouchableOpacity onPress={() => handleDelete(item.brand)}>
                                <Icon name='delete' size={24} style={{ color: '#00c4f5', marginBottom: 10 }} />
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => handleEdit(item) }>
                                <Icon name='edit' size={24} style={{ color: '#00c4f5' }} />
                            </TouchableOpacity>
                        </View>
                    </View>
                )}
                keyExtractor={(item) => item.id}
            />
        </View>
        <View>

            <Modal isVisible={isModalVisible}
                onBackdropPress={hanldeBackPress}
            >
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <View style={{ width: 300, height: 300, backgroundColor: 'white', borderRadius: 15 }}>
                        <TextInput style={{
                            color: 'gray', borderColor: 'gray', fontSize: 20,
                            fontWeight: 'bold', borderWidth: 2, padding: 10, borderRadius: 10, width: '75%', margin: 10
                        }}
                            placeholder='Brand'
                            value={brand}
                            onChangeText={(text) => handleChangeBrand(text)}
                        />
                        <TextInput style={{
                            color: 'gray', borderColor: 'gray',
                            fontSize: 20, fontWeight: 'bold', borderWidth: 2, padding: 10, borderRadius: 10, width: '75%', margin:

10 }} placeholder='name' value={title} onChangeText={(text) => handleChangeTitle(text)} /> <TextInput style={{ color: 'gray', borderColor: 'gray', fontSize: 20, fontWeight: 'bold', borderWidth: 2, padding: 10, borderRadius: 10, width: '75%', margin: 10 }} placeholder='price' value={price} onChangeText={(text) => handleChangePrice(text)} /> <TouchableOpacity onPress={() => handleSaveData()}> <Text style={{ backgroundColor: 'tomato', color: 'black', padding: 10, width: '50%', textAlign: 'center', marginLeft: 20, borderRadius: 10 }}>Save

                        <TouchableOpacity onPress={() => handleUpdatedDta()}>
                            <Text style={{
                                backgroundColor: 'tomato', color: 'black',
                                padding: 10, width: '50%', textAlign: 'center', marginLeft: 20, borderRadius: 10
                            }}>Update</Text>
                        </TouchableOpacity>

                    </View>
                </View>
            </Modal>
        </View>
    </View>
) }

export default Todo;