Delete multiple items using state in FlatList. React Native - reactjs

Question

I am trying to make a to do list using React Native. How can I delete multiple items in FlatList all the items that has the state of completed: true with a TouchableOpacity(acting like a button). I do not know what methods I should put in function deleteCompleteTodo()
import React, {useState} from 'react';
import { Text, SafeAreaView, StatusBar, FlatList, View, TouchableOpacity,Button, Alert } from 'react-native';
import TodoInput from "./TodoInput";
import TodoItem from "./TodoItem";
const App = () => {
const [todoItems, setTodoItems] = useState([{text: "Buy groceries", completed: true}, {text: "Make blogpost", completed: false}]);
// Add a new item to the state
function addTodoItem(_text) {
setTodoItems([...todoItems, {text:_text, completed: false}]);
}
// Delete an item from state by index
function deleteTodoItem(_index){
let tempArr = [...todoItems];
tempArr.splice(_index, 1);
setTodoItems(tempArr)
}
// Function to set completed to true by index.
function completeTodoItem(_index){
let tempArr = [...todoItems];
if(tempArr[_index].completed){
tempArr[_index].completed = false
}
else{
tempArr[_index].completed = true
}
setTodoItems(tempArr)
}
// Function to delete all completed task
function deleteCompleteTodo(){
let tempArr = [...todoItems];
var i=0;
tempArr.map()
}
// Render
return (
<>
<View style={{flex: 1}}>
<SafeAreaView style={{justifyContent: 'flex-start', flex: 1, backgroundColor: '#dfdfdf', padding: 14, paddingTop: 35}}>
<StatusBar barStyle={"light-content"} backgroundColor={"#212121"}/>
<View style={{flexDirection: 'row', height: 45, justifyContent: 'space-between', marginBottom: 10, borderRadius: 10, backgroundColor: '#d4d1c9'}}>
<View style={{paddingHorizontal: 10, paddingVertical: 5}}>
<Text style={{fontSize: 36, fontWeight: 'bold'}}>Todo</Text>
</View>
{/*Button*/}
<View style={{paddingHorizontal: 10, paddingVertical: 5}}>
{/* <Text style={{fontSize: 36, fontWeight: 'bold'}}>D</Text> */}
<TouchableOpacity
style={{width:50, paddingVertical:8 , backgroundColor: '#ff0000', justifyContent: 'center', alignItems: 'center', borderRadius: 100}}
onPress={() => deleteCompleteTodo()}>
<Text style={{color: '#fafafa', fontWeight: 'bold'}}>Delete</Text>
</TouchableOpacity>
</View>
</View>
<FlatList
data={todoItems}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => {
return (
<TodoItem
item={item}
deleteFunction={() => deleteTodoItem(index)}
completeFunction={() => completeTodoItem(index)}
/>
)
}}
/>
<TodoInput onPress={addTodoItem} />
</SafeAreaView>
</View>
</>
);
};
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

You can use filter to delete multy items:
deleteCompleteTodo = () => {
setTodoItems(preState => preState.filter(item => !item.completed))
}