Expo React Native Todo App Part 6 — delete item

Add the rubbish bin icon and implement the delete function

Photo by Steve Johnson on Unsplash

Add the delete icon

import { MaterialIcons } from '@expo/vector-icons';
return (<TouchableOpacity style={styles.item}><Text >{item.task}</Text><MaterialIcons name="delete" size={24} color="black"/></TouchableOpacity>)
item: {padding: 15,borderColor: 'black',borderRadius: 5,borderWidth: 1,marginTop: 15,borderStyle: "dashed",flexDirection: "row",justifyContent: 'space-between',}

space between

space around

Add the deleteTask function

<TouchableOpacity style={styles.item}><Text >{item.task}</Text><MaterialIcons name="delete" size={24} color="black"onPress={() => alert(item.id)}/></TouchableOpacity>
const deleteTask = id => {setTasks(prevTasks => {return prevTasks.filter(task => task.id != id)})}
<Task item={item}deleteTask={deleteTask}/>
<TouchableOpacity style={styles.item}><Text>{item.task}</Text><MaterialIcons name="delete" size={24} color="black"onPress={() => deleteTask(item.id)}/></TouchableOpacity>

Teaching JavasScript, React, React Native, MongoDB and NodeJS https://linktr.ee/ckmobile

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store