Using React Hooks in classes [duplicate]

Question

I'm fairly new to React, and I am currently having some trouble using the react hooks. I initialize show and setShow in the constructor, yet I get an error saying that show and setShow are undefined in the render function. I have something like:

export default class Projects extends Component {
  constructor(props) {
    super(props);
    const [show, setShow] = useState(false);    //Where I initialize show and setShow
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
  }

  render() {
    return (
      <div class="projects-section" id="projects">
        <img className="project-image" src="assets/UAS-frontend.png" onClick={handleShow}/>
        <Modal show={show} onHide={handleClose}>    //Where I get the error
          <Modal.Header closeButton></Modal.Header>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
            <Button variant="primary" onClick={handleClose}>
              Save Changes
            </Button>
          </Modal.Footer>
        </Modal>
      </div>
    )
  }
}

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. See this topic stackoverflow.com/questions/53371356/… — Piotr Glejzer
– Piotr Glejzer, Commented Feb 23, 2020 at 17:20
Does this answer your question? How can I use React hooks in React classic `class` component? — Piotr Glejzer
– Piotr Glejzer, Commented Feb 23, 2020 at 17:22

Tasos · Accepted Answer · 2020-02-23 17:24:32Z

1

React hooks for state management are used in function components. In your case you can go with the old school state object:

constructor(props) {
  super(props);
  this.state = {
    show: false,
  }
}

If you want to use React Hooks instead do this:

const Projects = (props) => {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <div class="projects-section" id="projects">
      <img className="project-image" src="assets/UAS-frontend.png" onClick={handleShow}/>
      <Modal show={show} onHide={handleClose}>    //Where I get the error
        <Modal.Header closeButton></Modal.Header>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  )
}

edited Feb 23, 2020 at 17:24

answered Feb 23, 2020 at 17:20

Tasos

2,06516 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yury Tarabanko Over a year ago

OMG. Half a year is now "old school"

Tasos Over a year ago

Good ol' times @YuryTarabanko

Collectives™ on Stack Overflow

Using React Hooks in classes [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related