modal for all items shown in one click ( Reactjs )

Question

I have a todo-list app and I want to show more details of a task when its clicked so I'm using the react-modal package and when I click on one item, all of the items modal will pop up and not the single one I clicked on

import { useContext, useState } from "react";

import Task from "../task/task";
import { todosContext } from "../../context/todosContext";
import { motion, AnimatePresence } from "framer-motion";
import Modal from "react-modal";

const Search = (props) => {
  const [query, setQuery] = useState("");
  const { todos, setTodos } = useContext(todosContext);
  const [modalIsOpen, setIsOpen] = useState(false);
  const [openedId, setOpenedId] = useState("");

  const PER_PAGE = 4;
  Modal.setAppElement(document.getElementById("root"));

  function openModal() {
    setIsOpen(true);
  }
  function closeModal() {
    setIsOpen(false);
  }


  return (
    <StyledDiv>
     
      <AnimatePresence>
        {currentPageData.map((todo) => (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{
              opacity: 0,
              position: "absolute",
              y: -1000,
              transition: "1s",
            }}
            key={todo.id}
          >
            <Task
              onRequestOpen={openModal}
              key={todo.id}
              title={todo.title}
              description={todo.description}
              backgroundColor="#ffffff"
              disabled={loading}
              onClick={() => deleteHandler(todo.id)}
              placeholder={"completed"}
              onChange={(e) => processChange(e, todo.id)}
              checked={todo.completed}
              id={todo.id}
              htmlFor={todo.id}
              marginTop="-5px"
            ></Task>

            <Modal
              isOpen={modalIsOpen}
              onRequestClose={closeModal}
              style={customStyles}
              contentLabel="Example Modal"
            >
              <button onClick={closeModal}>close</button>
              {todo.description}
            </Modal>
          </motion.div>
        ))}
      </AnimatePresence>
  
    </StyledDiv>
  );
};

export default Search;

the solution I have myself is to make a state called opendItemId and pass the id of the item to it when the user clicks on the item it works and shows the single and specific detail of the item I clicked on but I can't close the modal because isOpen which is a property of </Modal component as you can see will be setting the todo.id to opnedItemId state like this isOpen={modalIsOpen(openedId === todo.id)}

Apostolos · Accepted Answer · 2022-07-13 06:22:15Z

1

First of all, you are creating N modals, with N being the number of the todo items.

So Modal should be outside of your map function. Then you can set the currently selected todo item in your state and load it in your modal.

const [currentTodo, setCurrentTodo] = useState(null);

  const openModal = todoItem => {
    setCurrentTodo(todoItem);
    setIsOpen(true);
  }

. . .

        <Task
          onRequestOpen={() => openModal(todo)}
          key={todo.id}

. . .

        <Modal
          isOpen={modalIsOpen}
          onRequestClose={closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >
          <button onClick={closeModal}>close</button>
          {currentToDo.description}
        </Modal>

answered Jul 13, 2022 at 6:22

Apostolos

10.5k5 gold badges32 silver badges44 bronze badges

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

2 Comments

Matin Over a year ago

It worked but it seems it needs a little tweak for rendering apparently first i should check if currentTodo exists and then render it {currentTodo && <h2>{currentTodo.description}</h2>}

Apostolos Over a year ago

yes of course, correct!

Collectives™ on Stack Overflow

modal for all items shown in one click ( Reactjs )

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related