Adding tasks

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.

Exercise 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.

Show example 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.

Test yourself

Write the TextInput placeholder

<TextInput ____="New task" value={task} onChangeText={setTask} />

Show answer

<TextInput placeholder="New task" value={task} onChangeText={setTask} />

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
Show answer

On every keystroke — onChangeText fires on every keystroke.
Match each prop to its job

value

Displayed text
onChangeText

Fires on keystroke
placeholder

Empty field hint
onPress

Button tap

Next lesson: Task list

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies