Your code did not save :)

But anyway - to attach mdbreact you don't have to modify index.html, just install mdbreact dependancy and import styles in index.js.

Example index.js from create-react-app with mdb imports (order matters!!):

import React from 'react';
import ReactDOM from 'react-dom';
import "@fortawesome/fontawesome-free/css/all.min.css";
import 'bootstrap-css-only/css/bootstrap.min.css'; 
import 'mdbreact/dist/css/mdb.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

Our users tend to have problems with installation, we have updated the getting started docs, which you can find here: 5 min quick start.

Any feedback will be warmly welcome :)

Best,

Jakub

In the index.html had:

It seems that the verision difference in bootstrap was causing confusion in the css.

Hi,

Try this code:

import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';

class SymbolFilterPanelModal extends Component {
  state = { modal: true };

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

  render() {
    return (
      <MDBContainer>
        <MDBBtn onClick={this.toggle}>Modal</MDBBtn>

        <MDBModal isOpen={this.state.modal} toggle={this.toggle}>
          <MDBModalBody>
            (...)
          </MDBModalBody>
        </MDBModal>
      </MDBContainer>
    );
  }
}

export default SymbolFilterPanelModal;

Modal needs property isOpen to be passed on.

You can find more info in the API section of the Modal documentation.

Best,

Jakub