Component State

Functional components

Functional components use the useState hook to hold state within a component.

function Counter() {
  const [value, setValue] = useState(1);
  
  const handleClick = () => {
    setValue(value => value + 1);
  };

  return (
    <div>
      <p>
        Counter Value: {value}
      </p>
      <button onClick={handleClick}> Increase counter </button>
    </div>
  );
}

Try it on Codepen