React useState:
- Allows adding state to functional components
- An array containing the current state (a variable) value and the function that updates that state value
- As a hook, only used at the top level of a component
- Cannot be called within a loop or condition test
- The useState parameter is the new/next value
- React state is read-only, you cannot modify an object, only replace the state with a replacement object
Example Functional Component:
import { useState } from 'react';
function AddressInfo() {
const [nmFirst, setNmFirst] = useState('Tom');
const [nmLast, setNmLast] = useState('Testor');
const [addrSt, setAddr] = useState('123 Main St');
const [addrCity, setAddr] = useState('Wake Forest');
const [addrState, setAddr] = useState('NC');
// can also consume an updater function which takes the state variable as the only input
const [addrNotes, setAddrNotes] = useState(() => createAddrNotes());
}
Example Form Component:
import { useState } from 'react';
export default function Form() {
const [nmFirst, setNmFirst] = useState('Tom');
const [nmLast, setNmLast] = useState('Testor');
return (
<>
<input
value={nmFirst}
onChange={e => setNmFirst(e.target.value)}
/>
<input
value={nmLast}
onChange={e => setNmLast(e.target.value)}
/>
<p>Hello, {nmFirst} {nmLast}.</p>
</>
// . . .
);
}
Example Social Media Like Component:
import { useState } from 'react';
export default function LikePost() {
const [liked, setLiked] = useState(true);
function handleChange(e) {
setLiked(e.target.checked);
}
return (
<>
<label>
<input
type="checkbox"
checked={liked}
onChange={handleChange}
/>
I liked this
</label>
<p>You {liked ? 'liked' : 'did not like'} this.</p>
</>
);
}
Gotcha:
- Within the updater function, the set only updates the state value to the next for the next render, if updated multiple times, only the first next value sets.
First Set Wins Example:
function handleClick() {
setName('Tom');
setName('Tina');
console.log(name); // output is still Tom
}
]
Form Example:
[
import { useState } from 'react';
export default function Form() {
const [form, setForm] = useState({
nmFirst: 'Tom',
nmLast: 'Testor',
email: 'tomtestor@mindwatering.net',
addrSt: '123 Main St.',
addrCity: 'Wake Forest',
addrState: 'NC',
});
return (
<>
<label>
First name:
<input
value={form.nmFirst}
onChange={e => {
setForm({
...form,
nmFirst: e.target.value
});
}}
/>
</label>
<label>
Last name:
<input
value={form.nmLast}
onChange={e => {
setForm({
...form,
nmLast: e.target.value
});
}}
/>
</label>
<label>
Email:
<input
value={form.email}
onChange={e => {
setForm({
...form,
email: e.target.value
});
}}
/>
</label>
<label>
Street Address:
<input
value={form.addrSt}
onChange={e => {
setForm({
...form,
addrSt: e.target.value
});
}}
/>
</label>
<label>
City:
<input
value={form.addrCity}
onChange={e => {
setForm({
...form,
addrCity: e.target.value
});
}}
/>
</label>
<label>
State:
<input
value={form.addrState}
onChange={e => {
setForm({
...form,
addrState: e.target.value
});
}}
/>
</label>
<p>
{form.firstName}{' '}
{form.lastName}{' '}
({form.email})
</p>
<p>
{form.addrSt}
<br/>
{form.addrCity}{' '}
{form.addrState}
</p>
</>
);
}
previous page
|