Похожие чаты

Import React, { Component } from 'react' import { Table, Button

} 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

1 ответов

7 просмотров

gist?

Похожие вопросы

Обсуждают сегодня

Какой-то там пердун в 90-х решил, что есть какая-то разная типизация. Кого вообще это волнует?
КТ315
49
Hi. Do we have a raid bot? Why nobody doing raids on X? Even RH mentioned this and nobody paying attention...whats the channel for hex memes? If mods cant run raids just insta...
H
31
Подскажите, а есть vault lite или ченить такое?) А то нужен вольт для похода в вольт, но весит он ~500 мб) как-то многовато для парочки запросов ))
Alexandr Orloff
17
блеать, почему так?? где в роутере это исправляется?
Арсен Маньяков 🇦🇲
16
void terminal_scroll() { memmove(terminal_buffer, terminal_buffer + VGA_WIDTH, buffer_size - VGA_WIDTH); memset(terminal_buffer + buffer_size - VGA_WIDTH, 0, VGA_WIDTH); ...
Егор
47
🌊 Ocean Nodes Dashboard Update 🚀 Hey, Oceaners! First off, a massive round of applause 👏to all of you for the amazing engagement since we launched Ocean Nodes. In just a few ...
KreigDK | Never DM first🌊
3
Всем привет! Подскажите, пожалуйста, в чем ошибка? Настраиваю подключение к MySQL. Либы лежат рядом с exe. Все как по "учебнику"
Евгений
16
А можете как-то проверить меня по знаниям по ассемблеру?
A A
132
Здравствуйте! У меня появилась возможность купить книгу "Изучай Haskell во имя добра!". Но я где-то слышал, что эта книга устарела. Насколько это правда??
E
22
люди, которые используют flameshot, к вам вопрос. Можно-ли поставить хоткей на создание скриншота? В программе есть отдел "горячие клавиши", но там все для редактирования, скр...
ThunDer104
11
Карта сайта