reactjs - React Bootstrap modal inside map function eliminates background and appears twice - Stack Overflow

admin管理员组

文章数量:1333451

I am using a map function to create a list with fetched data. I want to make one cell a clickable button that makes modal appear with the text from the object's "about" property inside that array. I get three problems:

1. on modal appearance the outside of the modal doesnt become dimmed (darker) but completely black.
2. modal appears twice, one under another, different parts of text appear in each of the windows
3. "about" prperty doesn't parse at all. i always get the same text for each istance that "map" function generates. that doesn't happen if i put the proerty string outside the fucntion

     <tbody>
                            {employees.map((employeeData: any, index: any) => (
                                <tr key={index} style={trDiv} ref={myRef}>
                                    <td>
                                        <img
                                            style={{ minWidth: '120px', maxWidth: '140px' }}
                                            src={employeeData.imageUrl}
                                            alt=""
                                            className="card-img-top img-thumbnail"
                                        />
                                    </td>
                                    <td>
                                        {employeeData.firstName}
                                        {index}
                                    </td>
                                    <td>{employeeData.lastName}</td>
                                    <td>{employeeData.adress}</td>
                                    <td>{employeeData.email}</td>
                                    <td>{employeeData.contactNumber}</td>
                                    <td>{employeeData.position}</td>
                                    <td>
                                        <Button variant="primary" onClick={showModal}>
                                            View
                                        </Button>
                                        <Modal show={isLoaded} onHide={hideModal}>
                                            <Modal.Header closeButton>
                                                <Modal.Title>Modal heading</Modal.Title>
                                            </Modal.Header>
                                            <Modal.Body>{employeeData.about}</Modal.Body>
                                            <Modal.Footer>
                                                <Button variant="secondary" onClick={hideModal}>
                                                    Close
                                                </Button>
                                                <Button variant="primary" onClick={hideModal}>
                                                    Save Changes
                                                </Button>
                                            </Modal.Footer>
                                        </Modal>
                                    </td>
                                    <td>{employeeData.manager_id}</td>
                                    <td>
                                        {new Date(employeeData.created_at).toLocaleDateString() +
                                            ' ' +
                                            new Date(employeeData.created_at).toLocaleTimeString()}
                                    </td>
                                    <td>
                                        {new Date(employeeData.updated_at).toLocaleDateString() +
                                            ' ' +
                                            new Date(employeeData.updated_at).toLocaleTimeString()}
                                    </td>
                                </tr>
                            ))}
                        </tbody>
</code>

I am using a map function to create a list with fetched data. I want to make one cell a clickable button that makes modal appear with the text from the object's "about" property inside that array. I get three problems:

1. on modal appearance the outside of the modal doesnt become dimmed (darker) but completely black.
2. modal appears twice, one under another, different parts of text appear in each of the windows
3. "about" prperty doesn't parse at all. i always get the same text for each istance that "map" function generates. that doesn't happen if i put the proerty string outside the fucntion

     <tbody>
                            {employees.map((employeeData: any, index: any) => (
                                <tr key={index} style={trDiv} ref={myRef}>
                                    <td>
                                        <img
                                            style={{ minWidth: '120px', maxWidth: '140px' }}
                                            src={employeeData.imageUrl}
                                            alt=""
                                            className="card-img-top img-thumbnail"
                                        />
                                    </td>
                                    <td>
                                        {employeeData.firstName}
                                        {index}
                                    </td>
                                    <td>{employeeData.lastName}</td>
                                    <td>{employeeData.adress}</td>
                                    <td>{employeeData.email}</td>
                                    <td>{employeeData.contactNumber}</td>
                                    <td>{employeeData.position}</td>
                                    <td>
                                        <Button variant="primary" onClick={showModal}>
                                            View
                                        </Button>
                                        <Modal show={isLoaded} onHide={hideModal}>
                                            <Modal.Header closeButton>
                                                <Modal.Title>Modal heading</Modal.Title>
                                            </Modal.Header>
                                            <Modal.Body>{employeeData.about}</Modal.Body>
                                            <Modal.Footer>
                                                <Button variant="secondary" onClick={hideModal}>
                                                    Close
                                                </Button>
                                                <Button variant="primary" onClick={hideModal}>
                                                    Save Changes
                                                </Button>
                                            </Modal.Footer>
                                        </Modal>
                                    </td>
                                    <td>{employeeData.manager_id}</td>
                                    <td>
                                        {new Date(employeeData.created_at).toLocaleDateString() +
                                            ' ' +
                                            new Date(employeeData.created_at).toLocaleTimeString()}
                                    </td>
                                    <td>
                                        {new Date(employeeData.updated_at).toLocaleDateString() +
                                            ' ' +
                                            new Date(employeeData.updated_at).toLocaleTimeString()}
                                    </td>
                                </tr>
                            ))}
                        </tbody>
</code>

• reactjs
• fetch
• bootstrap-modal
• bootstrap-5

Share Improve this question Follow edited Nov 20, 2024 at 22:55 Danko Grgić asked Nov 20, 2024 at 14:51 Danko GrgićDanko Grgić 1933 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

figured it by ChatGpt. The modal needs to be outside map function and i needed to make one more useState and with each click on the button that opens modal the setstate sets the current item in the map array as the one that needs to be shown in the modal. otherwise if you click on modal when its inside map function the state sets to true for all open modal buttons in the list

/*const [isLoaded, setIsLoaded] = useState(false);
    const [putEmployee, setPutEmployee] = useState(undefined);

    const hideModal = () => {
        setIsLoaded(false);
    };
    const showModal = (employee: any) => {
        setIsLoaded(true);
        setPutEmployee(employee);
    };


 <td>
                                    <Button variant="primary" onClick={() => showModal(employeeData.about)}>
                                        View
                                    </Button>
                                </td>*/


  </div>
            <Modal show={isLoaded} onHide={hideModal}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>{putEmployee}</Modal.Body>
                <Modal.Footer>
                    <Button variant="primary" onClick={hideModal}>
                        Close
                    </Button>
                </Modal.Footer>
            </Modal>
        </div>
*/

本文标签： reactjsReact Bootstrap modal inside map function eliminates background and appears twiceStack Overflow