反应地图数组模态窗口项不起作用

Question

I'm using state everything works fine except for the modal window. Inside the state, I use objects that are normally displayed (you can look at the screenshot https://ibb.co/YBg30NW ) please pay attention to the buttons named "Open modal" when you click on this button, a modal window opens and should display the name of the programming language as shown in the screenshot. The problem is that when opening a modal window, only the same name of the programming languages ​​"CSS" is displayed https://ibb.co/J5jrZF0 no matter what button I click to open the modal window, only "CSS" is displayed, how can I solve this problem ?

import React from "react"
import cnStyle from "./ContentCourses.module.css"
import python from "./Icons/pyhton.png"
import cPlusPlus from "./Icons/c++.png"
import JavaScript from "./Icons/JavaScript.png"
import swift from "./Icons/swift.png"
import HTML from "./Icons/HTML.png"
import CSS from "./Icons/CSS.png"
import Modal from 'react-modal';

const customStyles = {
    content: {
        top: '50%',
        left: '50%',
        right: 'auto',
        bottom: 'auto',
        marginRight: '-50%',
        transform: 'translate(-50%, -50%)'
    }
};

Modal.setAppElement('#root');

export class ContentCourses extends React.Component {

    constructor() {
        super();
        this.state = {
            languageInfo: [
                {
                    languageName: "Python 3",
                    about: `
                    Learn Python, one of today's most in-demand programming languages on-the-go!
                    Practice writing Python code, collect points, & show off your skills now!`,
                    Learners: 30045,
                    Lessons: 87,
                    Quizzes: 271,
                    icon: python,
                },

                {
                    languageName: "JavaScript",
                    about: `
                    Learn all the basic features of JavaScript, including making your website more interactive,
                    changing website content, validating forms, and so much more.`,
                    Learners: 42123,
                    Lessons: 42,
                    Quizzes: 321,
                    icon: JavaScript,
                },

                {
                    languageName: "C++",
                    about: `
                    Our C++ tutorial covers basic concepts, data types, arrays, pointers, conditional statements,
                    loops, functions, classes, objects, inheritance, and polymorphism.`,
                    Learners: 53241,
                    Lessons: 23,
                    Quizzes: 451,
                    icon: cPlusPlus,
                },

                {
                    languageName: "Swift",
                    about: `
                    Learn all the main concepts of Swift programming and apply your newly gained knowledge
                    to create your own, fully functioning iOS app!`,
                    Learners: 63211,
                    Lessons: 54,
                    Quizzes: 623,
                    icon: swift,
                },

                {
                    languageName: "HTML",
                    about: `
                    This FREE course will teach you how to design a web page using HTML.
                    Complete a series of hands-on exercises and practice while writing real HTML code.`,
                    Learners: 18024,
                    Lessons: 32,
                    Quizzes: 962,
                    icon: HTML,
                },

                {
                    languageName: "CSS",
                    about: `
                    Our CSS course will teach you how to control the style & layout of websites.
                    Complete a series of exercises and practice while filling out actual CSS templates.`,
                    Learners: 58932,
                    Lessons: 46,
                    Quizzes: 125,
                    icon: CSS,
                },

            ],

            modalIsOpen: false,
            setIsOpen: false,
        }
    }

    openModal() {
        this.setState({setIsOpen: true})
        this.setState({modalIsOpen: true})
    }

    afterOpenModal() {
        // references are now sync'd and can be accessed.
        // subtitle.style.color = '#f00';
    }

    closeModal() {
        this.setState({setIsOpen: false})
        this.setState({modalIsOpen: false})
    }

    render() {
        var subtitle;
        const resultsRender = [];

        for (var i = 0; i < this.state.languageInfo.length; i += 2) {
            resultsRender.push(
                <div className={cnStyle.clearfix}>
                    {
                        this.state.languageInfo.slice(i, i + 2).map((item, index) => {
                                return (
                                    <div key={index} className={cnStyle.ContentVeryHeadlineBlock}>

                                        <div className={cnStyle.ContentHeadlineBlock}>
                                            <div className={cnStyle.ContentCoursesBlock}>

                                                <div style={{marginRight: '25px'}} className={cnStyle.courseIconBlock}>
                                                    <img className={cnStyle.courseIcon} src={item.icon} alt=""/>
                                                </div>

                                                <div>
                                                    <div className={cnStyle.courseName}>
                                                        <h3>{item.languageName}</h3>
                                                    </div>

                                                    <div>
                                                        <p style={{color: 'dimgrey'}}>
                                                            {item.about}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>


                                            <div className={cnStyle.buttonMoreBlock}>
                                                <div>
                                                    <button onClick={this.openModal.bind(this)}>Open Modal</button>
                                                    <Modal
                                                        isOpen={this.state.modalIsOpen}
                                                        onAfterOpen={this.afterOpenModal.bind(this)}
                                                        onRequestClose={this.closeModal.bind(this)}
                                                        style={customStyles}
                                                        contentLabel="Example Modal"
                                                    >

                                                        <h2 ref={_subtitle => (subtitle = _subtitle)}>{item.languageName}</h2>
                                                        <button onClick={this.closeModal.bind(this)}>close</button>
                                                        <div>I am a modal</div>
                                                        <form>
                                                            <input />
                                                            <button>tab navigation</button>
                                                            <button>stays</button>
                                                            <button>inside</button>
                                                            <button>the modal</button>
                                                        </form>
                                                    </Modal>
                                                </div>
                                            </div>

                                        </div>

                                        <div className={cnStyle.moreInformation}>
                                            <div>
                                                <p>Learners</p>
                                                <p className={cnStyle.learnQuantity}>{item.Learners}</p>
                                            </div>
                                            <div>
                                                <p>Lessons</p>
                                                <p className={cnStyle.learnQuantity}>{item.Lessons}</p>
                                            </div>
                                            <div>
                                                <p>Quizzes</p>
                                                <p className={cnStyle.learnQuantity}>{item.Quizzes}</p>
                                            </div>
                                        </div>
                                    </div>
                                );
                            }
                        )
                    }
                </div>
            );
        }

        return (
            <div>
                {resultsRender}
            </div>
        );
    }
}

Answer 1

This is the culprit: isOpen={this.state.modalIsOpen} . Once modalIsOpen === true , all modals will show up and you see only CSS modal because it stays on top of the other modals.

To fix this, you can specific which modal should be opened when the button is clicked. It can be done by passing a parameter to the openModal function.

For example, you can pass item.languageName to openModal function. And modify isOpen={this.state.modalIsOpen === item.languageName} . Thus, when modalIsOpen === "CSS" , the modal for Javascript will not show up.