restored delete functionality

imports/ui/Plants.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Table } from 'react-bootstrap';
+import { Table, Button } from 'react-bootstrap';
 
-const Plants = ({plants}) => {
+const Plants = ({plants, deletePlant}) => {
 
   return (
       <>
@@ -12,6 +12,7 @@ const Plants = ({plants}) => {
                     <tr>
                     <th>Plant name</th>
                     <th>Plant type</th>
+                    <th></th>
                     </tr>
                 </thead>
                 <tbody>
@@ -20,6 +21,7 @@ const Plants = ({plants}) => {
                         return <tr key={index}>
                                     <td>{plant.name}</td>
                                     <td>{plant.type}</td>
+                                    <td><Button onClick={()=>{deletePlant(plant.id)}}>Delete</Button></td>
                                 </tr>
                     })
                 }

imports/ui/Settings.jsx

@@ -24,6 +24,15 @@ class Settings extends React.Component{
         })
     }
 
+    deletePlant = (id) => {
+        let plants = this.state.plants.filter(plant =>{ // callback function
+            return plant.id !== id // when it returns false (the id is the same), it filters this object out of the array
+        })
+        this.setState({
+            plants: plants
+        })
+    }
+
     render(){
         return (
             <>  
@@ -39,7 +48,10 @@ class Settings extends React.Component{
 
                     <br></br>
 
-                    <AddPlant addPlant={this.addPlant} typeArray={this.state.types}></AddPlant>
+                    <AddPlant 
+                        addPlant={this.addPlant}
+                        typeArray={this.state.types}
+                    ></AddPlant>
                     
 
                     <Row className="justify-content-md-center">
@@ -48,7 +60,10 @@ class Settings extends React.Component{
 
                     <br></br>
                     
-                    <Plants plants={this.state.plants}></Plants>
+                    <Plants 
+                        plants={this.state.plants}
+                        deletePlant={this.deletePlant}
+                    ></Plants>
 
                 </Container>