React, CSS: How to make corresponding modal window open for each card

Question

Let me explain the situation. Currently I am doing a project to practice SCSS and React. It is a website dedicated to soccer team. The problem is that I am creating a custom modal window using CSS and HTML. What I want is that whenever I click the button "see pics" a modal window related to this card should open, while in my case all modal windows open at once.

All modal windows open at once stacked one on each other. Like that.

There are four modal windows like that overall, but only the top modal shows. The HTML structure of these modal windows is the following:

They have got the same classes and ids.

In React part I have a component called PopUp, which gets information from db.json as props.

import React from 'react';
import Button from './button-round-dark';

const generateAdditionalInfo = ({info}) => {
    if (info) {
        return info.map((item) => {
            const addInfo = item.additionalInfo;
            console.log(addInfo);
            return (
            <div className="popup" id="popup">
                <div className="popup__content" key={addInfo.id}>
                    <div className="popup__left">
                        <img className="popup__img" src={`../../${process.env.PUBLIC_URL}/images/additionalInfoPics/${addInfo.images[0]}`}/>
                        <img className="popup__img" src={`../../${process.env.PUBLIC_URL}/images/additionalInfoPics/${addInfo.images[1]}`}/>
                    </div>

                    <div className="popup__right">
                        <a href="#legend-team-section" className="popup__close">x</a>
                        <h2 className="heading-secondary u-margin-bottom-small">{addInfo.title}</h2>
                        <p className="popup__description">{addInfo.description}</p>
                    </div>
                </div>    
            </div>
            )
        })
    }
}


const PopUp = (props) => {
    return (
        <div>
            {generateAdditionalInfo(props)}
        </div>

    )
}

export default PopUp;

db.json

"legendaryTeam":[
      {
        "id":"p1",
        "name": "buffon",
        "image":"buffon.jpg",
        "years":"2001-2018",
        "number":"18",
        "position":"goalkeeper",
        "physicalFeatures":{
          "weight":"86",
          "height":"194",
          "speed":"7",
          "power":"250"
        },
        "additionalInfo":{
          "id":"1",
          "images":["buffon_1.jpg","buffon_2.jpg"],
          "title":"Buffon title",
          "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam dignissim diam quis enim lobortis scelerisque. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Lorem sed risus ultricies tristique nulla aliquet enim. Ultrices in iaculis nunc sed augue lacus viverra vitae congue."
        }
      },
      {
        "id":"p2",
        "name": "Ravanelli",
        "image":"ravanelli.jpg",
        "years":"1992-1996",
        "number":"10",
        "position":"forward",
        "physicalFeatures":{
          "weight":"75",
          "height":"176",
          "speed":"9",
          "power":"300"
        },
        "additionalInfo":{
          "id":"2",
          "images":["ravanelli_1.jpg","ravanelli_2.jpg"],
          "title":"Ravanelli title",
          "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam dignissim diam quis enim lobortis scelerisque. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Lorem sed risus ultricies tristique nulla aliquet enim. Ultrices in iaculis nunc sed augue lacus viverra vitae congue."          
        }
      }

Please pay attention to additionalInfo object, it is where information goes to PopUp component.

Custom CSS code for modal window looks like this.

.popup {
    height: 100vh;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    background-color: rgba($color-black,0.8);
    z-index:99999; 
    opacity: 0;
    visibility: hidden;
    transition:all .3s; 
    &:target {
        opacity: 1;
        visibility: visible;
    }
        &__content {
            @include centrify;
            width:75%;
            background-color: $color-white;
            box-shadow: 0 2rem 4rem rgba($color-black, .2);
            border-radius: 3px;
            display: table;
            overflow: hidden;
        }

        &__left {
            width:33.33333333%;
            display: table-cell;
        }

        &__right {
            width:66.666666666%;
            display: table-cell;
            vertical-align: middle;
            padding: 3rem 5rem;
        }

        &__img {
            display: block;
            width:100%;
        }

        &__description {
            font-size: 1.4rem;
            margin-bottom: 4rem;
        }
}

Modal window open with help of target selector. Now I am scratching head over how to make implement what I want. Please help me out. Do you have any ideas? By the way other modal windows look like this. But they are lower in stack so they are not shown.

If you want to tinker with my project click here

To run react see picture below

To run db.json you need to install it globally

$ npm install -g json-server

And then run it, see pic below

To run SCSS see pic below

blastz blastz · Accepted Answer · 2018-01-12T03:09:58

Your problem is not in your description, you bind the ButtonRoundDark to all of the modal. You need to add onClick event to your 'see pics' button. After click, fetch the data, show the modal.

React, CSS: How to make corresponding modal window open for each card

1 Answers