CODEWITHSUNDEEP
reactjsreact-hooks
James Wuhan
James Wuhan

Reputation: 35

Cannot pass object data to modal

having an issue with passing object data to modal, the modal and cards show up fine with correct data, but once I click the card the model does not display its corresponding data, they each have there own object data as so:

export const projectObjOne = {
id: "projects",

topLine: "Project 1",
headline: "React, JS, Node",
description: "",

img: "/images/Aucklandbanner.png",
alt: "project-one",

buttonLabel: "Button 1",
buttonLabelTwo: "Button 2",
};

export const projectObjTwo = {
id: "projects",

topLine: "Project 2",
headline: "React, JS, Node",
description: "",

img: "/images/Aucklandbanner.png",
alt: "project-one",

buttonLabel: "Button 1",
buttonLabelTwo: "Button 2",
};

Now here is my index with the cards and modal hook:

const Projects = ({}) => {
  const [showModal, setShowModal] = useState(false);

  // const [modalInfo, setModalInfo] = usestate([]),

  const openModal = () => {
    setShowModal(!showModal);

    console.log("clicked");
  };

  const projectData = {};

  return (
    <>
      <ProjectsContainer id="projects">
        <ProjectsWrapper>
          <div onClick={openModal}>
            <ProjectCard {...projectObjOne} />
            <ProjectModal
              showModal={showModal}
              setShowModal={setShowModal}
              {...projectObjOne}
            />
          </div>

          <div onClick={openModal}>
            <ProjectCard {...projectObjTwo} />
            <ProjectModal
              showModal={showModal}
              setShowModal={setShowModal}
              {...projectObjTwo}
            />
          </div>

          <div onClick={openModal}>
            <ProjectCard {...projectObjThree} />
            <ProjectModal
              showModal={showModal}
              setShowModal={setShowModal}
              {...projectObjTwo}
            />
          </div>
        </ProjectsWrapper>
      </ProjectsContainer>
    </>
  );
};

So when I click the card only the spread operator for the first objects data shows, any of the others won't show its corresponding data as it should.

Cheers

Upvotes: 0

Views: 175

Answers (1)

Jose Rojas
Jose Rojas

Reputation: 3530

You are using the same showModal variable for all modals. Modal second and third might be there but they're overlaped, one solution would be make an object with the different modals or simply use a variable for each modal.

const Projects = ({}) => {
const [showModal, setShowModal] = useState({ first: false, second: false, third: false});

const openModal = (modalName) => {
   setShowModal({ ...showModal, [modalName]: !showModal[modalName] });
};
...

<div onClick={() => openModal('first')}>
        <ProjectCard {...projectObjOne} />
        <ProjectModal
          showModal={showModal['first']}
          setShowModal={setShowModal}
          {...projectObjOne}
        />
</div>

Upvotes: 1

Related Questions