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>
);
}
}