State and events
- React Native course
- Beginner
- Lesson 114/116
- 6 min
Write interaction with useState and onPress.
State with useState
Now we will use useState to track the user input and the added items. We define two state variables: text (the input text) and items (the array of added items). We import useState from the react package.
const [text, setText] = useState('');
const [items, setItems] = useState([]);We bind the value property of TextInput to text and the onChangeText property to setText. This way each time the user presses a key text is updated and the input field re-renders.
Adding with onPress
To add an item we place a Button. When pressed the onPress event fires; here we add text to the items array and clear text. This way the list grows as the user adds items.
<Button
title="Add"
onPress={() => {
setItems([...items, text]);
setText('');
}}
/>With [...items, text] we append the new item to the old array. With setText('') we clear the input field. We display the added items with items.map.
Practice Your turn: state and add button
Import useState from react. Define two useState calls in App for text and items. Give the TextInput value={text} and onChangeText={setText}. Add a <Button title="Add" /> and in its onPress call setItems([...items, text]) and setText('').
Starter code
import { View, Text, TextInput, StyleSheet } from 'react-native';
export default function App() {
// add state for text and items
return (
<View style={styles.container}>
<Text>Shopping List</Text>
<TextInput placeholder="Item name" style={styles.input} />
{/* add an Add button */}
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 },
input: { borderWidth: 1, padding: 8, marginBottom: 8 },
});Sample solution
import { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
export default function App() {
const [text, setText] = useState('');
const [items, setItems] = useState([]);
return (
<View style={styles.container}>
<Text>Shopping List</Text>
<TextInput value={text} onChangeText={setText} placeholder="Item name" style={styles.input} />
<Button title="Add" onPress={() => { setItems([...items, text]); setText(''); }} />
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 },
input: { borderWidth: 1, padding: 8, marginBottom: 8 },
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does useState return?
const [v, setV] = useState(0)- A component
- A string
- An array: [value, function] Correct answer
- A number
Explanation: useState returns a [value, function] pair.
2 Fill in the blank: useState call
const [text, setText] = ____('');const [text, setText] = useState('');Explanation: You hold state with useState.
3 Match: concept and usage
| Term | Meaning |
|---|---|
useState |
holding state |
onPress |
button press |
setText |
state update |