CODEWITHSUNDEEP
reactjs
user13344741
user13344741

Reputation:

How implementing a modal with reactjs

i have a modal, but dont recognize their styles, what is the matter?, why dont recognize the styles? i need to import an other dependecy?

import React,{Component} from 'react'
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button';

class CustomModal extends Component{
    constructor(props) {
        super(props);
        this.state = {
            show: false
        };

        this.handleClose = this.handleClose.bind(this);
        this.handleShow = this.handleShow.bind(this);
    }

    handleClose (){
        this.setState({ show: false });
    };

    handleShow (){
        this.setState({ show: true });
    };

    render() {
        return(
            <div>
                <Button variant="primary" onClick={this.handleShow}>Update</Button>

                <Modal show={this.state.show} onHide={this.handleClose}>
                    <Modal.Header closeButton>
                        <Modal.Title>Update</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>...</Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={this.handleClose}>Close</Button>
                        <Button variant="primary">Save</Button>
                    </Modal.Footer>
                </Modal>
            </div>
        );
    }
}
 export default CustomModal;

i am using Button but my button never is painting

Upvotes: 1

Views: 48

Answers (1)

Milind Agrawal
Milind Agrawal

Reputation: 2944

I simply changed the way you have imported the Components and it started working.

Changed the import to

import { Modal, Button } from "react-bootstrap";

From

import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button';

Live demo here https://codesandbox.io/s/react-bootstrap-x0ix0?fontsize=14&hidenavigation=1&theme=dark

Upvotes: 1

Related Questions