Updating state values

React components use state for values that change over time. The state values used by components start off in one state, as we saw in the previous section, and then change in response to some event. For example, the server responds to an API request with new data or the user has clicked a button or changed a form field.

With functional components that use the useState() Hook, state values are updated differently to class components that rely on the setState() method. Instead of using setState() to update every piece of component state, you have individual functions to set each state value. The useState() Hook returns an array. The first item is the state value and the second is the function used to update the value. Let's take a look at an example:

import React, { Fragment, useState } from 'react';

export default function App() {
  const [name, setName] = useState('Adam');
  const [age, setAge] = useState(35);

  return (
    <Fragment>
 ...