Putting it together
- React Native course
- Beginner
- Lesson 52/116
- 6 min
Combine all parts into a working to-do app.
Putting it together
In the final step we complete the app. Two new pieces will be added: a counter and a clear button. The counter shows how many tasks exist; it is read from tasks.length. The clear button deletes all tasks with setTasks([]).
These small additions give the user an overview and a way to clear stray items. Two short tasks lead you to a fully working app. At the end you will have a real to-do app that combines adding, listing, completing and clearing.
Practice Add a counter
Add a counter Text below the title. Its content should be {tasks.length} tasks. That is, write <Text>{tasks.length} tasks</Text> and place it below <Text>To-do</Text>.
Starter code
import React from 'react';
import { SafeAreaView, View, Text, TextInput, Button, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
export default function App() {
const [task, setTask] = React.useState('');
const [tasks, setTasks] = React.useState([]);
const addTask = () => {
setTasks([...tasks, { id: Date.now().toString(), text: task, done: false }]);
setTask('');
};
const toggleTask = (id) => {
setTasks(tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
};
return (
<SafeAreaView style={styles.container}>
<Text>To-do</Text>
{/* Add the counter and clear button here */}
<TextInput placeholder="New task" value={task} onChangeText={setTask} />
<Button title="Add" onPress={addTask} />
<FlatList
data={tasks}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => toggleTask(item.id)}>
<Text style={{ textDecorationLine: item.done ? 'line-through' : 'none' }}>{item.text}</Text>
</TouchableOpacity>
)}
keyExtractor={(item) => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});Sample solution
<React.Fragment>
<Text>To-do</Text>
<Text>{tasks.length} tasks</Text>
</React.Fragment>Practice Add the clear button
Make two changes. (1) Below toggleTask add const clearAll = () => setTasks([]). (2) Below the FlatList add <Button title="Clear" onPress={clearAll} />.
Starter code
import React from 'react';
import { SafeAreaView, View, Text, TextInput, Button, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
export default function App() {
const [task, setTask] = React.useState('');
const [tasks, setTasks] = React.useState([]);
const addTask = () => {
setTasks([...tasks, { id: Date.now().toString(), text: task, done: false }]);
setTask('');
};
const toggleTask = (id) => {
setTasks(tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
};
// Add the clearAll function here
return (
<SafeAreaView style={styles.container}>
<Text>To-do</Text>
<Text>{tasks.length} tasks</Text>
<TextInput placeholder="New task" value={task} onChangeText={setTask} />
<Button title="Add" onPress={addTask} />
<FlatList
data={tasks}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => toggleTask(item.id)}>
<Text style={{ textDecorationLine: item.done ? 'line-through' : 'none' }}>{item.text}</Text>
</TouchableOpacity>
)}
keyExtractor={(item) => item.id}
/>
{/* Add the clear button here */}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});Sample solution
const clearAll = () => setTasks([]);
// and in the return, below the FlatList:
<Button title="Clear" onPress={clearAll} />Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 How do you delete all tasks?
const clearAll = () => ???;- setTasks(tasks)
- setTasks([task])
- setTasks([]) Correct answer
- tasks = []
Explanation: setTasks([]) empties the tasks array.
2 Match each function to its purpose
| Term | Meaning |
|---|---|
addTask |
Adds a new task |
toggleTask |
Flips done |
clearAll |
Deletes all |
tasks.length |
Task count |
3 Write the task count
<Text>{____} tasks</Text><Text>{tasks.length} tasks</Text>Explanation: tasks.length gives the number of tasks.