Delete modal doe not change CSS.display

[TurtleWolfe]

I'm trying to move the delete button's functionality into a modal, as to get a confirmation before deleting from a simple pocket tap. If I open the inspector I can manually make it appear by changing the display in CSS, but I thought that's what the library was handling for me.

_/clientsrc/src/components/BarrelDetails.js

    import React, { Component } from 'react';
    import axios from 'axios';
    import { Link } from 'react-router-dom';
    import logo from '../logo.svg';
    class BarrelDetails extends Component {
        constructor (props){
           super(props);
           this.state = {
            details: ''
        }
    }

    componentWillMount(){
        this.getBarrel();    
    }

    getBarrel(){
        let barrelID = this.props.match.params.id;
        axios.get(`/api/Barrels/${barrelID}`)
        .then (response => {
          this.setState({details: response.data}, () =>
          {
            console.log(this.state);
          })
        })
        .catch(err => console.log(err));
      }

    onDelete(){
        let barrelID = this.state.details.id;
        axios.delete(`/api/Barrels/${barrelID}`)
        .then ( response => {
            this.props.history.push('/');
        } ).catch(err => console.log(err));
    }

    render () {
        return (
            <div className = "container" >

            <header className="App-header z-depth-3">
            <h2>{this.state.details.Name}</h2>
            <Link className = "btn grey" to = "/">back</Link>
            </header>

                <ul className = "collection z-depth-3" >
                <li className = "collection-item" >planted: <b className = "yellow" > {this.state.details.date_planted}</b> </li>
                <li className = "collection-item" >Barrel #: <b className = "yellow" > {this.state.details.barrel_number}</b> </li>
                <li className = "collection-item" ><b className = "yellow" > {this.state.details.contents}</b> </li>
                <li className = "collection-item" >location: <b className = "yellow" > {this.state.details.location}</b> </li>
                <li className = "collection-item" >geolocation: <b className = "yellow" > this.state.details.geoLocaction.toString()</b> </li>
                <li className = "collection-item" >notes: <b className = "yellow" > {this.state.details.notes}</b> </li>
                <li className = "collection-item" >size: <b className = "yellow" > {this.state.details.size}</b> </li>
                <li className = "collection-item" >last checked: <b className = "yellow" > {this.state.details.date_last_checked}</b> </li>
                </ul>
                <button onClick = {this.onDelete.bind(this) } className = "btn red right"><i className ="far fa-trash-alt"></i> Delete this Barrel</button>

            <h5>what that modal do?</h5>

            <Link to={`/barrels/edit/${this.state.details.id}`} className="btn waves-effect z-depth-3"><i className = "fas fa-pencil-alt" ></i> Edit this Barrel</Link>
            <Link to={`#modal2`} className="btn waves-effect red"><i className ="far fa-trash-alt z-depth-3"></i> Delete this Barrel</Link>

            <div id="modal1" className="modal">
              <div className="modal-content">
                <h4>Modal Header</h4>
                <p>A bunch of text</p>
              </div>
              <div className="modal-footer">
                <a href="" className="modal-action modal-close waves-effect waves-green">Button</a>
              </div>
            </div>

            <div id="modal2" className="modal orange">
              <div className="modal-content">
                <h4>Are you sure you want to delete</h4>
                <p>A bunch of text</p>
              </div>
              <div className="modal-footer">
                <a href="" className="modal-action modal-close waves-effect waves-green">Button</a>
              </div>
            </div>

            <p className="App-intro">
            TurtleWolfe.com<br/>
            using LoopBack & React<br/>
            <img src={logo} className="App-logo" alt="logo" />
            </p>

                </div>
               )
    }
    }

    export default BarrelDetails;

..probably related
_clientsrc/src/components/BarrelEdit.js,
the Datepicker is also inaccessible until after a refresh & they are both Materialize components, but refreshing doesn't work for the modal.. & the side Nav seems to function fine.

The index has references to materialize CSS & js then they are all being initiated in the document ready call at the bottom of the page.
_/clientsrc/public/index.html

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"><script defer="defer" src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script><title>Food Liberation Front</title><link href="/static/css/main.24854688.css" rel="stylesheet"></head><body class="green"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script><script>$(document).ready(() => {
          // Init Modal
          $('.modal').modal();

          // Init Sidenav
          $('.button-collapse').sideNav();

          // Init datepicker
$('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15, // Creates a dropdown of 15 years to control year
    format: 'dd-mm-yyyy' });
    });</script><script type="text/javascript" src="/static/js/main.e9f763ab.js"></script></body></html>

https://flf9090.herokuapp.com