How to pass data to a React Bootstrap modal?

In React Bootstrap, we have the styling and interactive components of Modal. In simple terms, Modal is nothing but the popup box that is opened when some action has been performed. To make the modal customizable in terms of its behavior, we can pass the custom data to the React Bootstrap modal using state variables and also by using the props in ReactJS.

In this article, we will learn how we can pass the user-defined or provided data to the bootstrap modal.

Prerequisite

• React JS
• HTML
• CSS
• JavaScript

Steps to create React Application and installing required modules:

Step 1: Create a React application using the following command:

npx create-react-app modal-data

Step 2: After creating your project folder(i.e. modal-data), move to it by using the following command:

cd modal-data

Step 3: Now install react-bootstrap in your working directory i.e. modal-data by executing the below command in the VScode terminal:

npm install react-bootstrap bootstrap

Step 4: Now we need to Add Bootstrap CSS to the index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

Approach 1: Using State Variables

Import the Modal component from the React Bootstrap library. Here we have the App component, in which there is a state variable like showM and modalData to hold or store the data. Here, when the user enters the data in the text field and clicks on the button, the input value gets stored in the modalData, and the modal that is opened is displayed with this data. Here we are using the state variable to dynamically change and update the data, which is passed to the Modal component.

Example 1: This example implements the above-mentioned approach.

Javascript

// App.js
import React, { useState } from "react";
import {
    Button, Modal, Form,
    Container, Row, Col,
} from "react-bootstrap";
function App() {
    const [showM, set_Show_M] =
        useState(false);
    const [modalData, set_Modal_Data] =
        useState("");
    const [input, set_Input_Val] =
        useState("");
    const modalShow = () => {
        set_Show_M(true);};
    const closeModal = () => {
        set_Show_M(false);};
    const inputChange = (e) => {
        set_Input_Val(e.target.value);};
    const openModalHandle = () => {
        set_Modal_Data(input);
        modalShow();};
    return (
        <div className="App text-center">
            <h1 className="text-success mb-4">
                GeeksforGeeks
            </h1>
            <h3>
                Passing Data Using State Variable
            </h3>
            <Container>
                <Row className="justify-content-center">
                    <Col md={6}>
                        <Form>
                            <Form.Control
                                type="text"
                                placeholder="Enter Data"
                                value={
                                    input}
                                onChange={
                                    inputChange}
                                className="mb-3"/>
                        </Form>
                        <Button
                            onClick={
                                openModalHandle}
                            variant="success">
                            Open Modal
                        </Button>
                    </Col>
                </Row>
            </Container>
            <Modal
                show={showM}
                onHide={closeModal}>
                <Modal.Header
                    closeButton
                    className="bg-primary text-white">
                    <Modal.Title>
                        Data in Modal
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h1 className="text-primary">
                        {modalData}
                    </h1>
                </Modal.Body>
                <Modal.Footer>
                    <Button
                        variant="secondary"
                        onClick={
                            closeModal}
                        className="text-danger">
                        Close
                    </Button>
                </Modal.Footer>
            </Modal>
        </div>
    );
}
export default App;

Output:

Approach 2: Using Props

Import the modal component and defined the two modal components. There is ModalDataFunction, which revives the props as showModal, handleClose, modalData, and modalTitle. When the user enters the data into the input fields, then the data that is entered is passed as the modalData props to the particulate modal component. This method is more efficient for passing the data and displaying it within the modular component.

Example: This example implements the above-mentioned approach.

Javascript

// App.js
import React, { useState } from "react";
import {
    Button, Modal, Form,
    Container, Row, Col,
} from "react-bootstrap";
function ModalDataFunction({
    showModal, handleClose,
    modalData, modalTitle,
}) {
    return (
        <Modal
            show={showModal}
            onHide={handleClose}>
            <Modal.Header
                closeButton
                className="bg-success text-white">
                <Modal.Title>
                    {modalTitle}
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <h1 className="text-success">
                    {modalData}
                </h1>
            </Modal.Body>
            <Modal.Footer>
                <Button
                    variant="secondary"
                    onClick={
                        handleClose}
                    className="text-success">
                    Close
                </Button>
            </Modal.Footer>
        </Modal>
    );
}
function App() {
    const [m1Show, set_Show_M1] =
        useState(false);
    const [m2Show, set_Show_M2] =
        useState(false);
    const [m1Data, set_Modal_D1] =
        useState("");
    const [m2Data, set_Modal_D2] =
        useState("");
    const [input1, set_Input_Val1] =
        useState("");
    const [input2, set_Input_Val2] =
        useState("");
    const openM1 = () => {
        set_Show_M1(true);};
    const closeM1 = () => {
        set_Show_M1(false);};
    const openM2 = () => {
        set_Show_M2(true);};
    const closeM2 = () => {
        set_Show_M2(false);};
    const handleInputChange1 = (e) => {
        set_Input_Val1(e.target.value);};
    const input2Change = (e) => {
        set_Input_Val2(e.target.value);};
    const openM1Handle = () => {
        set_Modal_D1(input1);
        openM1();};
    const openM2Handle = () => {
        set_Modal_D2(input2);
        openM2();};
    return (
        <Container className="App text-center">
            <h1 className="text-success mb-4">
                GeeksforGeeks
            </h1>
            <h3>
                Passing Data Using Props
            </h3>
            <Row className="justify-content-center mb-4">
                <Col md={6}>
                    <Form>
                        <Form.Control
                            type="text"
                            placeholder="Enter Data for Modal 1"
                            value={
                                input1}
                            onChange={
                                handleInputChange1}
                            className="mb-3"/>
                    </Form>
                    <Button
                        onClick={
                            openM1Handle}
                        variant="success">
                        Open Modal 1
                    </Button>
                </Col>
            </Row>
            <Row className="justify-content-center mb-4">
                <Col md={6}>
                    <Form>
                        <Form.Control
                            type="text"
                            placeholder="Enter Data for Modal 2"
                            value={
                                input2}
                            onChange={
                                input2Change}
                            className="mb-3"/>
                    </Form>
                    <Button
                        onClick={
                            openM2Handle}
                        variant="primary">
                        Open Modal 2
                    </Button>
                </Col>
            </Row>
            <ModalDataFunction
                showModal={m1Show}
                handleClose={closeM1}
                modalData={m1Data}
                modalTitle="Modal 1"/>
            <ModalDataFunction
                showModal={m2Show}
                handleClose={closeM2}
                modalData={m2Data}
                modalTitle="Modal 2"/>
        </Container>
    );
}
export default App;

Output: