setIsOpen is not a function

Question

I'm creating a modal in react, I want that when a card is clicked the modal comes up but I'm having an issue showing it. I'm using UseState to handle the opening and closing (toggle true or false), but when clicking on the card, I'm getting an error that says TypeError: setIsOpen is not a function How can I make it work? I don't understand why this is happening. this is my code.

import React, { useState } from "react";
import Modal from "../modal/projectModal.jsx";

// Scss
import "./projectBox.scss";

const ProjectBox = (props) => {
  const { isOpen, setIsOpen } = useState(false);

  return (
    <div>
      <div className="portfolio__box" onClick={() => setIsOpen(true)}>
        <img src={props.preview} alt="project" />
        <div className="portfolio__hover-info flex-center">
          <div className="text-center">
            <p className="font30 weight800">{props.title}</p>
            <p className="font12 weight500">{props.tag}</p>
          </div>
        </div>
      </div>
      <Modal open={isOpen}>project details</Modal>
    </div>
  );
};

export default ProjectBox;

`useState` returns an Array instead of an Object. So first step would be to use `const [isOpen, setIsOpen] = useState(false);` — Jahir, Dec 07 '21 at 20:33
To add, setIsOpen(!isOpen) would make more sense to toggle open/close. — emre-ozgun, Dec 07 '21 at 20:36

score 6 · Answer 1 · edited Dec 17 '21 at 21:28

6

Change { } to [ ] in your useState.
So, it would be like

const [ isOpen, setIsOpen ] = useState(false);

edited Dec 17 '21 at 21:28

β.εηοιτ.βε

33,893
13
69
83

answered Dec 07 '21 at 20:34

josue anguiano

201
1
2
7

1

The react docs are being rewritten to use function components instead of class. So it's easy to get confused. You can refer to the new react doc's (in beta right now) `useState` section to learn further https://beta.reactjs.org/reference/usestate – Jahir Dec 07 '21 at 20:50

setIsOpen is not a function

1 Answers1