Any advise on how to troubleshoot in REACT?

Yes, well… the project I am working on in my “spare” time is printing a MongoDB on a REACT app…

I got my backend connected and running on port 5000 as per my terminal says… I think I got the routes, schemas, .env and server.js properly set up… but I will continue testing later with Insomnia…

On the frontend I got the react-routerd-dom working… testing a navbar and some mock pages loading fine…

Buuutttt… is not loading a tbody of the chart I want from MongoDB…

I have checked the code and I have no syntax warning from VScode…

The developer tools from Chrome is BLANKED… shows me no warnings…

I DO have a warning from VScode that I have “Link” is defined but never used… ← this might be a problem because I DO have a link to my localhost:5000 ???

If you want to see the code is below… yes, its a modified code from one of the freecodecamp people… I got that one cuz I suck at coding and wanted to get this project done before learning how to actually code it…

import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";

const PartList = (props) => (
  <tr>
    <td>{props.part.Reference}</td>
    <td>{props.part.Description}</td>
    <td>{props.part.Replacements}</td>
  </tr>
);

export default class TableList extends Component {
  constructor(props) {
    super(props);

    this.state = { parts: [] };
  }

  componentDidMount() {
    axios
      .get("http://localhost:5000/mainparts/")
      .then((response) => {
        this.setState({ parts: response.data });
      })
      .catch((error) => {
        console.log(error);
      });
  }

  partMapping() {
    return this.state.parts.map((currentPart) => {
      return <PartList part={currentPart} />;
    });
  }

  render() {
    return (
      <div>
        <h1>I am the table list component</h1>;
        <table>
          <thead>
            <tr>
              <th>Reference</th>
              <th>Description</th>
              <th>Replacement</th>
            </tr>
          </thead>
          <tbody>{this.partMapping()}</tbody>
        </table>
      </div>
    );
  }
}

Its a backend issue…

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.