} from 'reactstrap';
import ModalForm from '../Modals/Modal'
class DataTable extends Component {
deleteItem = id => {
let confirmDelete = window.confirm('Delete item forever?')
if(confirmDelete){
fetch('http://localhost:3000/crud', {
method: 'delete',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id
})
})
.then(response => response.json())
.then(item => {
this.props.deleteItemFromState(id)
})
.catch(err => console.log(err))
}
}
render() {
const items = this.props.items.map(item => {
return (
<tr key={item.id}>
<th scope="row">{item.id}</th>
<td>{item.first}</td>
<td>{item.last}</td>
<td>{item.email}</td>
<td>{item.phone}</td>
<td>{item.location}</td>
<td>{item.hobby}</td>
<td>
<div style={{width:"110px"}}>
<ModalForm buttonLabel="Edit" item={item} updateState={this.props.updateState}/>
{' '}
<Button color="danger" onClick={() => this.deleteItem(item.id)}>Del</Button>
</div>
</td>
</tr>
)
})
return (
<Table responsive hover>
<thead>
<tr>
<th>ID</th>
<th>First</th>
<th>Last</th>
<th>Email</th>
<th>Phone</th>
<th>Location</th>
<th>Hobby</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{items}
</tbody>
</Table>
)
}
}
export default DataTable
gist?
Обсуждают сегодня