Modular window withdrawal for a specific object from the mass



  • I've got a set of objects and a key name on the button, and a modular window is to open specifically for this object. I had a fashion window at the beginning, but it didn't close. Turns out the problem is, I gave them all one condition, and when his condition changed, all the fashion windows opened, and the last one blocked the rest, so nothing worked. Now, in lieu of the condition, I've handed over that facility area, and for everyone, I added a key to separate regulation of their fashion windows. But now that I'm pressed on the button, my website is broken and the next mistake comes. введите сюда описание изображения You can explain where I'm making a mistake, try a lot of options and feel like I'm not learning anything, but I can't understand. This component code is:

    import React, {useState} from 'react';
    

    function Career() {

    let [isOpen, setIsOpen] = useState([
        {
            id: 1,
            name: "Микро кредитная организация",
            position: "Помощник главного менеджера",
            duration: "01.06.2019-29.08.2019",
            description: "На данной работе в моей главной обязанностью была оценка клиентов перед выдачей кредита. " +
                "А точнее, проверка данных клиента написанных при заявке на кредит. Для этого собирал информацию о клиенте из множество государственных и " +
                "личных баз данных финансовых организаций. При корректности данных и соответствий требованиям, составлял досье и отправлял комитету" +
                "для принятия окончательного решения о согласий или отказе в выдаче кредита.",
            placeImg: "microcredit.png",
            modal: false
        },
        {id: 2...},
        {id: 3...}
    ]);
    
    function SwitchModal(id) {
        setIsOpen(isOpen.map(workplace => {
                if (workplace.id === id) {
                    workplace.modal = !workplace.modal
                }
            })
        )
    }
    
    return (
        <div className="workWrapper" style={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            height: "100%",
            marginTop: "50px",
            paddingBottom: "20px",
            width: "100%"
        }}>
            {isOpen.map(workplace => {
                return <div key={workplace.id}>
                    <div style={{display: "flex", justifyContent: "space-between"}}>
                        <button style={{border: 0}} className="workPlaceNameText"
                                onClick={() => SwitchModal(workplace.id)}>{workplace.name}</button>
                        {workplace.modal && (<div className="modal">
                                <div className="modal-body">
                                    <p className="">{workplace.position + "  "}<span style={{
                                        color: "white",
                                        textDecoration: "underline"
                                    }}>{workplace.duration}</span></p>
                                    <p className="">{workplace.description}</p>
                                    <button onClick={() => SwitchModal(workplace.id)}>adadadad</button>
                                </div>
                            </div>
                        )}
                    </div>
                    <span className="line"/>
                </div>
            })
            }
        </div>
    );
    

    }

    export default Career;



  • I advise you to break a bunch of hard-coded codes into components, and to use fully the reaction mechanics. Decomposition. I gave the code for example, on which basis you can understand the approach.

    import React, {useState} from 'react';
    

    function App() {
    const [careersData, setCareersData] = useState([
    {
    id: 1,
    name: "Микро кредитная организация",
    position: "Помощник главного менеджера",
    duration: "01.06.2019-29.08.2019",
    description: "На данной работе в моей главной обязанностью была оценка клиентов перед выдачей кредита. " +
    "А точнее, проверка данных клиента написанных при заявке на кредит. Для этого собирал информацию о клиенте из множество государственных и " +
    "личных баз данных финансовых организаций. При корректности данных и соответствий требованиям, составлял досье и отправлял комитету" +
    "для принятия окончательного решения о согласий или отказе в выдаче кредита.",
    placeImg: "microcredit.png",
    }
    ]);
    return (
    <div>
    {careersData.map(career => {
    <Career key = {career.id} {...career}/>
    })}
    </div>
    );
    }

    function Career({name, ...otherCareerData}) {
    const [isOpen, setIsOpen] = useState(false)

    return (
    <div>
    <div style={{display: "flex", justifyContent: "space-between"}}>
    <button style={{border: 0}} className="workPlaceNameText"
    onClick={() => setIsOpen(true)}>{workplace.name}</button>
    <CareerModal isOpen = {isOpen} setIsOpen = {setIsOpen}
    {...otherCareerData} />
    </div>
    </div>
    );
    }

    function CareerModal({isOpen, setIsOpen, position, duration, description}) {

    return (
    <div>
    <div className={'modal-body' (isOpen ? 'visibleClass': 'hideClass') }>
    <p className="">{position + " "}<span style={{
    color: "white",
    textDecoration: "underline"
    }}>{duration}</span></p>
    <p className="">{description}</p>
    <button onClick={() => setIsOpen(false)}>adadadad</button>
    </div>
    </div>
    );
    }




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2