Topic: Data not shown π
Nick Risley asked 5 years ago
Hello, I've been having an issue with getting my data to come into my table. The table shows up but I can't get the data to be shown. Anyone have any ideas on how I should solve this problem?
import React, { Component } from 'react';
import { Table, Button } from 'reactstrap';
import ModalForm from '../Modals/Modal';
import { MDBTable, MDBTableBody, MDBTableHead, MDBDataTable } from 'mdbreact';
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.model_number}</td>
<td>{item.mechanical_contractor}</td>
<td>{item.manufacter}</td>
<td>{item.additional_comments}</td>
<td>
<div style={{width:"200px"}}>
<ModalForm buttonLabel="Edit" item={item} updateState={this.props.updateState}/>
{' '}
<Button color="danger" onClick={() => this.deleteItem(item.id)}>Del</Button>
</div>
</td>
</tr>
)
})
return (
<MDBDataTable striped data={items}>
<MDBTableHead>
<tr>
<th>ID</th>
<th>Model Number</th>
<th>Mechanical Contractor</th>
<th>Manufacturer</th>
<th>Comments</th>
<th>Actions</th>
</tr>
</MDBTableHead>
<MDBTableBody>
{items}
</MDBTableBody>
<tfoot>
<tr>
<th>ID</th>
<th>Model Number</th>
<th>Mechanical Contractor</th>
<th>Manufacturer</th>
<th>Comments</th>
<th>Actions</th>
</tr>
</tfoot>
</MDBDataTable>
)
} }
export default DataTable`
Piotr Glejzer staff answered 5 years ago
There is a problem with your code because the fetch
method doesn't work properly in that way. You can read about this here
https://create-react-app.dev/docs/proxying-api-requests-in-development/ .
Best,Piotr
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.22.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes