Adding tasks
- React Native course
- Beginner
- Lesson 49/116
- 6 min
Learn to add tasks with TextInput.
Adding tasks with TextInput
Adding a task needs a TextInput and a Button. TextInput is a controlled component: the value prop comes from state and onChangeText updates the state on every keystroke. This pattern is called a controlled component.
Example: <TextInput placeholder="New task" value={task} onChangeText={setTask} />. Here the task state holds the typed text. When the button is pressed, the addTask function pushes a new task object into the tasks array and clears task.
Practice Add the task input area
Add a TextInput and a Button to the skeleton. TextInput: placeholder="New task" value={task} onChangeText={setTask}. Button: title="Add" onPress={addTask}. Place both below the title text. The addTask function is already defined.
Starter code
import React from 'react';
import { SafeAreaView, View, Text, TextInput, Button, 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('');
};
return (
<SafeAreaView style={styles.container}>
<Text>To-do</Text>
{/* Add the task input area here */}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});Sample solution
import React from 'react';
import { SafeAreaView, View, Text, TextInput, Button, 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('');
};
return (
<SafeAreaView style={styles.container}>
<Text>To-do</Text>
<TextInput placeholder="New task" value={task} onChangeText={setTask} />
<Button title="Add" onPress={addTask} />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});The addTask function
The addTask function does two things: it appends a new task object to the tasks array and clears the input field. The new task object carries three fields: id is a unique identifier (usually Date.now().toString()), text is what the user typed, done starts as false.
The spread operator ... copies the old array into a new one: setTasks([...tasks, { id: ..., text: task, done: false }]). This is required for React Native to detect the change; writing tasks.push(newOne) keeps the same array reference and the screen does not update. At the end of the function setTask('') clears the field.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Write the TextInput placeholder
<TextInput ____="New task" value={task} onChangeText={setTask} /><TextInput placeholder="New task" value={task} onChangeText={setTask} />Explanation: placeholder is the hint text shown when the field is empty.
2 When is onChangeText called?
<TextInput value={task} onChangeText={setTask} />- When the button is pressed
- Only on focus
- Only when the field empties
- On every keystroke Correct answer
Explanation: onChangeText fires on every keystroke.
3 Match each prop to its job
| Term | Meaning |
|---|---|
value |
Displayed text |
onChangeText |
Fires on keystroke |
placeholder |
Empty field hint |
onPress |
Button tap |