Cant render dynamic content to my modal when clicking a picture

Question

So I'm currently building a new portfolio and I want to display my projects with just a picture at first but when you click on that picture a modal pops up with information about that specific project. I'm currently stuck on the dynamic content of the modal. I'm using useReducer to dispatch different content when a different picture is clicked but I'm just not connecting the right dots.

This code is the display picture that has the onClick to open the modal and the Modal is wrapped around my state data. The state is determined by props defined in the code below this one.

const DisplayPicture = (props) => {
    const [data, dispatch] = useReducer((state, action) => {
        if (action === props.projectAction) {
        return state
        } 
    }, props.title)
    return (
        <>
        <Modal projectAction={props.projectAction} show={props.show} closed={props.closed} >
            <h1>{data}</h1>
            </Modal>
        <div className={styles.picture} style={{backgroundImage: `url(${props.picture})`}} onClick={() => {props.clicked(); dispatch(props.projectAction)}}>
            <h1 className={styles.text}>{props.title}</h1>
        </div>
        </>
    )
}

This is where my props are defined for my useReducer in the previous code. I have each projects 'projectAction' prop set to a different vaule, and that prop is used as my action in the useReducer, and the title prop is used as the state in my useReducer. However, when I click on any picture and the modal is displayed, it only displays the title of the last Component for the modal content.

Any advice on how to render different content in the modal body by clicking on different pictures is greatly appreciated.

Thanks!

https://github.com/oballematt/matthew-oballe - heres the link to the repo if that will help.

 const [show, setShow] = useState(false)

    const openModal = () => {
        setShow(true)
    }

    const closeModal = () => {
        setShow(false)
    }

    return (
        <>
            <div className='container'>
                <h1 className={styles.title}>Projects</h1>
                <div className='row'>
                    <DisplayPicture projectAction='project1' show={show} closed={closeModal} picture={bestflix} title='BestFlix' clicked={openModal} />
                    <DisplayPicture projectAction='project2' show={show} closed={closeModal} picture={bestflix} title='Hello' clicked={openModal} />
                    <DisplayPicture projectAction='project3' show={show} closed={closeModal} picture={bestflix} title='Goodbye' clicked={openModal} />
                </div>
            </div>
        </>
    )
}

Giorgi Moniava · Accepted Answer · 2021-02-04T19:21:13.733

Actually your problem is because you were using single show variable to control all modals, when you clicked one, all were shown, just you only saw the "Goodbye" one because it was on top.

Here is one possible modification you could do (for example I used 2 components):

const Projects = () => {
  const [showIndex, setShowIndex] = useState(-1);

  const openModal = (ind) => {
    setShowIndex(ind);
  };

  const closeModal = () => {
    setShowIndex(-1);
  };

  return (
    <>
      <div className="container">
        <h1 className={styles.title}>Projects</h1>
        <div className="row">
          <DisplayPicture
            projectAction="project1"
            closed={closeModal}
            picture={bestflix}
            show={showIndex === 1}
            title="BestFlix"
            clicked={() => openModal(1)}
          />

          <DisplayPicture
            projectAction="project2"
            closed={closeModal}
            picture={bestflix}
            show={showIndex === 2}
            title="Hello"
            clicked={() => openModal(2)}
          />
        </div>
      </div>
    </>
  );
};

Cant render dynamic content to my modal when clicking a picture

1 Answers1