无法在 class 组件中调用 React Hook “React.useState”

Question

In ReactJS, I tried toggle div class name to another element. But I got error message like this. React Hook "React.useState" cannot be called in a class component

What do I need to fix the code?

import React from 'react';
 
class About extends React.Component{ 
  render(){
    const [show, setShow] = React.useState();
    return (
      <>
        <h1>About</h1>  
        <button className="toggle" onClick={() => setShow(!show)}>
          Toggle
        </button>
        <nav className={`nav ${show ? "show" : ""}`}>Navigation menu</nav>
      </>
    )
  }
}
  
export default About;

Answer 1

You can't use Hooks inside of a class component, but you can definitely mix classes and function components with Hooks in a single tree. ... In the longer term, we expect Hooks to be the primary way people write React components.

React Hooks FAQ