I can't get data from api to react

Question

I have problems getting data from api to react, i think there is a logical error, can you help me? I don't think i have any error on Visual Studio on back-end because it worked well on Postman, but in Visual Studio Code i have this problem. Also i am working with .net core 5.0 and the video that i'm following uses 3.1. My code is this: .env file:

REACT_APP_API=http://localhost:53535/api/
REACT_APP_PHOTOPATH=http://localhost:53535/Photos/

.Positions.js

import React,{Component} from 'react';
import {Table} from 'react-bootstrap';

import {Button,ButtonToolbar} from 'react-bootstrap';
import {AddPosModal} from './AddPosModal';

export class Positions extends Component{

    constructor(props){
        super(props);
        this.state={deps:[], addModalShow:false}
    }

    refreshList(){
        fetch(process.env.REACT_APP_API+'positions')
        .then(response=>response.json())
        .then(data=>{
            this.setState({deps:data});
        });
    }

    componentDidMount(){
        this.refreshList();
    }

    componentDidUpdate(){
        this.refreshList();
    }

    render(){
        const {deps}=this.state;
        let addModalClose=()=>this.setState({addModalShow:false});
        return(
            <div>
                <Table className="at-4" striped bordered hover size="sm">
                    <thead>
                        <tr>
                            <th>PositionID</th>
                            <th>Position</th>
                            <th>Options</th>
                        </tr>
                    </thead>
                    <tbody>
                        {deps.map(pos=>
                            <tr key={pos.PositionID}>
                                <td>{pos.PositionID}</td>
                                <td>{pos.Position}</td>
                                <td>Edit / Delete</td>
                            </tr>)}
                    </tbody>    
                </Table>

<ButtonToolbar>
    <Button variant='primary'
        onClick={()=>this.setState({addModalShow:true})}>
            Add Position
        </Button>

        <AddPosModal show={this.state.addModalShow}
        onHide={addModalClose}></AddPosModal>

</ButtonToolbar>

            </div>
        )
    }
}

Answer 1

I'm currently doing a look-up on React for an anticipated project and watching the video too. at 47min no data came out. After reviewing the code, ensure the Python Backend is running fine. It worked fine after I have my code thus:

Department Class:

import React,{Component} from 'react';
import {Table} from 'react-bootstrap';

export class Department extends Component{

    constructor(props){
        super(props);
        this.state={deps:[]}
    }

    refreshList(){
        fetch(process.env.REACT_APP_API+'department')
        .then(response=>response.json())
        .then(data=>{
            this.setState({deps:data});
        });
    }

    componentDidMount(){
        this.refreshList();
    }

    componentDidUpdate(){
        this.refreshList();
    }

    render(){
        const {deps} = this.state;
        return(
            <div>
                <Table className="mt-4" striped bordered hover size="sm">
                  <thead>
                      <tr>
                      <th>DepartmentId</th>
                      <th>DepartmentName</th>
                      <th>Options</th>
                      </tr>
                  </thead> 
                  <tbody>
                      {deps.map(dep=>
                        <tr key={dep.DepartmentId}>
                            <td>{dep.DepartmentId}</td>
                            <td>{dep.DepartmentName}</td>
                            <td>Edit/Delete</td>
                            
                        </tr>)}
                  </tbody>
                </Table>
            </div>
        )
    }
}

Also, ensure your router dom version is consistent in App.js.

import logo from './logo.svg';
import './App.css';

import {Home} from './Home';
import {Department} from './Department';
import {Employee} from './Employee';
import {Navigation} from './Navigation';

import {BrowserRouter, Route, Switch} from 'react-router-dom';
  
function App() {
  return (
    <BrowserRouter>
    <div className="container">
      <h3 className="m-3 d-flex justify-content-center">
        React Class
      </h3>

      <Navigation/>

      <Switch>
        <Route path='/' component={Home} exact/>
        <Route path='/department' component={Department}/>
        <Route path='/employee' component={Employee}/>
      </Switch>
    </div>
    </BrowserRouter>
  );
}

export default App;

Answer 2

A potential error when handling different api endpoints is in the following function. As a commentor explained this is not the reason that causes this error, see it is a clean-code best practice in case you have to handle different endpoints later :) The function:

refreshList(){
    fetch(process.env.REACT_APP_API+'positions')

There „positions“ is a static string, not a dynamic variable of type string.

It should look like this (In Typescript):

refreshList(thePosition: string){
    fetch(process.env.REACT_APP_API + thePosition)