Data not shown 😭


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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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