failes to open modal component from another component

Question

I'm trying to open modal (extends Component) from another component (that extends React.PureComponent) React.PureComponent.

I'm new to react and javascript so maybe my problem is already by mixing those components types?

and to be honest I'm using one component in TSX file and the other one in JS file.

maybe this is too quite a problem?

the bottom line is that after using this code:

First component Inside Modal.js:

import React, {Component} from 'react'
import {Modal, Button, Row, Col, Form} from 'react-bootstrap';


export class AddModal extends Component {
    constructor(props) {
        super(props);
    }

    render(){
        return(
            <Modal
                {...this.props}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Modal heading
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h4>Centered Modal</h4>
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
                        dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
                        consectetur ac, vestibulum at eros.
                    </p>
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={this.props.onHide}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

second component partial relevant code

import React from 'react';
import './App.scss';
import {createApiClient, Ticket} from './api';
import {AddModal} from './Modal'
import {Button} from 'react-bootstrap';

export type AppState = {
    tickets?: Ticket[],
    search: string,
    hidden: number,
    show: boolean,
    see_more : boolean[],
    addModalShow : boolean
}

const api = createApiClient();

export class App extends React.PureComponent<{}, AppState> {
    state: AppState = {
        tickets: [],
        search: '',
        hidden : 0,
        show : false,
        see_more : [],
        addModalShow : false
    };

addModalClose = () => {
        this.setState( {
            addModalShow : false
        });
    }

    addModalOpen = () => {
        this.setState( {
            addModalShow : true
        });
    }

<Button id="button" className="add_ticket" onClick={this.addModalOpen}>New Ticket</Button>
                <AddModal
                show={this.state.addModalShow}
                onHIde={this.addModalClose}
                />

what I get after pressing the Button is this: and it's literally over the first component.

any idea what is the problem here?

Answer 1

This is because your bootstrap CSS styling is not working!!!

First you need to Install Bootstrap using NPM

npm install --save bootstrap

Now import bootstrap anywhere in your project (recommended in the top most component), This works in my case.

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

CSS Styling will start working. :)

Happy Coding!