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;Change { } to [ ] in your useState.
So, it would be like
const [ isOpen, setIsOpen ] = useState(false);