React Native
Multiple state
Learn multiple state variables.
Multiple state variables
A component can have several state variables. You call useState separately for each independent value. For example, in a form you might have one state for name and one for email.
Example: const [name, setName] = useState(''); and const [email, setEmail] = useState('');. Updating one does not affect the other; each triggers its own re-render.
Multiple state keeps things organized; grouping related values in an object is another option. You will see that in the Object state lesson. For now, we learn separate useState calls for independent values.
States are independent
Each of several states is independent. Updating one does not touch the others. For example setName('Alex') only changes name; email stays the same.
Both still live in the same component, so when one changes the component re-renders and both show their current values. This keeps the display in sync.
If two values always change together, grouping them in a single object may be cleaner. Otherwise, keeping them separate improves readability.
Exercise A name and email form
Write an App component. Define two separate useState('') calls for name and email. Show the values with two <Text> tags. Export the App function.
Show example solution
function App() {
const [name, setName] = useState('Alex');
const [email, setEmail] = useState('alex@example.com');
return (
<>
<Text>{name}</Text>
<Text>{email}</Text>
</>
);
}
export default App;
Test yourself
-
How do you manage two states?
- State cannot be used
- It cannot be done with one useState
- Only one state can be held
- With two separate useState calls
Show answer
State cannot be used — each independent value gets its own useState call.
-
Add the second state
import { useState } from 'react';
function App() {
const [name, setName] = useState('');
const [____, setEmail] = useState('');
}
Show answer
import { useState } from 'react';
function App() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
}
-
Match multiple state concepts
- name
- Name state
- setName
- Name setter
- email
- Email state
- setEmail
- Email setter
Next lesson: Object state
