How to useState Variables in React Bootstrap
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"> w3wiki </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:
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
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';