Could the Delete modal be getting hijacked by React-Router? - reactjs

Question

I'm trying to move the delete button's functionality into a modal, so the user should get a confirmation before deleting from a single click. If I open the inspector I can manually make it appear by changing the display:None in CSS, but I thought that's what the Materialize library was handling for me.
When I click on the modal, I see it appearing in the address bar, so I assume react-router is hijacking the modal
I can probably replace the exact path to match /modal2, but should I be sending it to a new component? Or send it back to the same component with a property set for modal?
```
!jsx
import React from 'react';
import { Switch, Route} from 'react-router-dom';
import Barrels from './Barrels';
import About from './About';
import BarrelDetails from './BarrelDetails';
import AddBarrel from './AddBarrel';
import BarrelEdit from './BarrelEdit';
const Main = () => (
<main className="green">
<Switch>
<Route exact path= '/' component={Barrels} />
<Route exact path= '/about' component={About} />
<Route exact path= '/barrels/add' component={AddBarrel} />
<Route exact path= '/barrels/edit/:id' component={BarrelEdit} />
<Route exact path= '#modal2' component={BarrelEdit //modal component propperty turned on?// } />
<Route exact path= '/barrels/:id' component={BarrelDetails} />
</Switch>
</main>
)
export default Main;
```
live demo on Heroku
Repository on BitBucket
or should I be trying to move the modal trigger into the on onDelete function?
```
!jsx
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">
Button
</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">
Button
</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;
```

Answer 1

<Link to={`#modal2`} className="btn waves-effect red">
<i className ="far fa-trash-alt z-depth-3"></i>
Delete this Barrel
</Link>
This is the part that concerns me. This should not be a <Link> as that is attached to React-Router, you should just be using a button with the styling turned off, then triggering the modal via an onClick event.
You're also trying to show your modal in a way that probably won't work with React. You're going to want to set a local state of dislpayModal: false or something like that, then do a check for that state in your render, instead of relying on Materalize to do it for you. It can be tricky to get DOM based plugins to work in a React environment but doing it with the state is the "React Way" of doing things like this.
Another suggestion for common CSS frameworks with JavaScript pieces built on the DOM is to justo find a 3rd party React based implementation that has already done this for you. Such as: https://react-materialize.github.io/