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

1 Answer 1

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>
*/