restored delete functionality

This commit is contained in:
Max 2020-07-06 11:10:17 +02:00
parent f765ba3f63
commit 310418be7b
2 changed files with 21 additions and 4 deletions

View File

@ -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>
})
}

View File

@ -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>