restored delete functionality
This commit is contained in:
parent
f765ba3f63
commit
310418be7b
@ -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>
|
||||
})
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user