Lesson 1. Store a local state with useState 5. Exercise & next step

Update this component, so the displayed name is the one entered in the input. We also want it to be uppercase if the checkbox is checked.

const Exercise = () => {
  return (
    <>
      <p>
        <label>
          Name: <input placeholder="e.g. John Doe" />
        </label>
      </p>
      <p>
        <label>
          <input type="checkbox" /> Uppercase
        </label>
      </p>
      <p>Uppercase (or not) name:</p>
    </>
  )
}

render(Exercise)const Exercise = () => {
  return (
    <>
      <p>
        <label>
          Name: <input placeholder="e.g. John Doe" />
        </label>
      </p>
      <p>
        <label>
          <input type="checkbox" /> Uppercase
        </label>
      </p>
      <p>Uppercase (or not) name:</p>
    </>
  )
}

render(Exercise)
Result

Click here to see the solution!

We declare two local states:

name contains the input’s content,
uppercase is a boolean, true if the checkbox is checked.

Each of the two inputs manages one local state, and we use the states’ values to display the message.

Put this code inside the Exercise function:

const [name, setName] = useState('John Doe')
const [uppercase, setUppercase] = useState(false)

return (
  <>
    <p>
      <label>
        Name:{' '}
        <input
          placeholder="e.g. John Doe"
          value={name}
          onChange={(event) => {
            setName(event.target.value)
          }}
        />
      </label>
    </p>
    <p>
      <label>
        <input
          type="checkbox"
          checked={uppercase}
          onChange={(event) => {
            setUppercase(event.target.checked)
          }}
        />{' '}
        Uppercase
      </label>
    </p>
    <p>Uppercase (or not) name: {uppercase ? name.toUpperCase() : name}!</p>
  </>
)

Next step

Let’s see how to use the hook useEffect to trigger side effects and put the results of these effects in the local state we just created.