Modal inside map React

Question

I have similar problem like this How to use Bootstrap Modal inside map function in React Js to render indivisual elements? But answer is not working in my code or I didn't implement it properly. I know that in map to method is directed only last element of list but what I can do to transfer in toogleConfirmation proper data from map? Any hints?

Its my ModalComponent.jsx

export const ModalHeader = props => {
    return <div className="modal-header">{props.children}</div>;
};

export const ModalBody = props => {
    return <div className="modal-body">{props.children}</div>;
};

export const ModalFooter = props => {
    return <div className="modal-footer">{props.children}</div>;
};

class ModalComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modalShow: '',
            display: 'none'
        };
        this.openModal = this.openModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }

    openModal() {
        this.setState({
            modalShow: 'show',
            display: 'block'
        });
    }

    closeModal() {
        this.setState({
            modalShow: '',
            display: 'none'
        });
    }

    componentDidMount() {
        this.props.isOpen ? this.openModal() : this.closeModal();
    }

    componentDidUpdate(prevProps) {
        if (prevProps.isOpen !== this.props.isOpen) {
            this.props.isOpen ? this.openModal() : this.closeModal();
        }
    }

    render() {
        return (
            <div
                className={'modal fade ' + this.state.modalShow}
                tabIndex="-1"
                role="dialog"
                aria-hidden="true"
                style={{ display: this.state.display }}
            >
                <div className="modal-dialog" role="document">
                    <div className="modal-content">{this.props.children}</div>
                </div>
            </div>
        );
    }
}

export default ModalComponent;

and table in render method

class Datas extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modal: false,
            isConfirmed: false,
            collections: [],
            data: '',
            datas: []
        };

        this.toggle = this.toggle.bind(this);
        this.changeConfirmation = this.changeConfirmation.bind(this);
    }


    toggle() {
        this.setState({ modal: !this.state.modal });
    }

    changeConfirmation(){
        this.setState({
            isConfirmed: !this.state.isConfirmed
        });
    }

    toggleConfirmation(name, status) {
        this.changeConfirmation();
        this.toggle();
          //next code with name and status

    }

    render() {

        return (

            <Table responsive>
                <thead className="text-primary">
                <tr>
                    <th>Name</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                {this.state.collections.map((collection, i) => (
                    <tr key={i}>
                        <td>{collection.name}</td>
                        <td>{collection.status}</td>
                        <td>
                            <button
                                type="button"
                                className="btn btn-danger"
                                onClick={() => this.setState({
                                    modal: true,
                                    data: collection
                                })}
                            >
                            </button>

                            <Modal isOpen={this.state.modal}>
                                <ModalHeader>
                                    <h5>Confirmation</h5>
                                    <button
                                        type="button"
                                        className="close"
                                        aria-label="Close"
                                        onClick={this.toggle.bind(this)}
                                    >
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </ModalHeader>
                                <ModalBody>
                                    <p>Are you sure to proceed with this action with {collection.name} ?</p>
                                </ModalBody>
                                <ModalFooter>
                                    <button
                                        type="button"
                                        className="btn btn-secondary"
                                        onClick={this.toggle.bind(this)}
                                    >
                                        Close
                                    </button>
                                    <button
                                        type="button"
                                        className="btn btn-primary"
                                        onClick={this.toggleConfirmation.bind(this, collection.name, collection.status)}
                                    >
                                        Ok
                                    </button>
                                </ModalFooter>
                            </Modal>
                        </td>
                    </tr>
                ))}
                </tbody>
            </Table>
        )
    }}

Answer 1

just pass collection as props to ModalBody , ModalHeader & ModalFooter in Data.js

<ModalBody collection={collection}/>

you can update ModalBody , ModalHeader & ModalFooter like this :

export const ModalBody = props => {
    return (<div className="modal-body">
                <p>Are you sure to proceed with this action with {props.collection.name} </p>
            </div>);
};