Connecting MongoDB and printing table on html in REACT.. not working

[Elindo]

48 line code that obviously is not working. I’ll post the code and then I’ll post what I did and the problems.

import "./App.css";
import React from "react";

const mongoose = require("mongoose");

main().catch((err) => console.log(err));

async function main() {
  await mongoose.connect(
    "mongodb+srv://MyUser:MyPassword@cluster0.gcyyo.mongodb.net/test?retryWrites=true&w=majority"
  );
}

const PartSchema = new mongoose.Schema({
  reference: String,
  description: String,
  replacements: String,
});

const Part = mongoose.model("Part", PartSchema);

function App() {
  return (
    <div className="App">
      <h1>Hello World 5 </h1>
      <table>
        <thead>
          <tr>
            <th>Reference </th>
            <th> Description </th>
            <th>Replacements </th>
          </tr>
        </thead>
        <tbody>
          {Part.map((item) => (
            <tr>
              <td>{item.reference}</td>
              <td>{item.description}</td>
              <td>{item.replacements}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

[Elindo]

How / What did I do to get here and get the error?

npx create-react app
npm install mongodb
npm install mongoose – save

After intalling mongoose I noticed a tons of errors in my terminal.

I did a npm audit fix – force and still got some erros.

The erros still didn’t break my entire code and I could still see the “Hello World” on my port 3000

Then I moved to require mongoose and try to connect, and gave the console error of TypeError: mongoose.connect is not a function… still I did see “Hello World” on my port 3000

Then I moved to do the map() and try to put it on an html table and there was were entire code broke and now is just a blank screen on my local host 3000

[Elindo]

BTW… I have a functional code working on plane html and javascript that does a filtering of the table… but I want to move this with something holding the database to pull the information from… and I also would like to use REACT instead of individual html pages.

Oh… if you are asking, how did I hard coded 900+ items for a table? I converted an excel sheet into html, then I just posted the htlm table… but as you can imagine, these would be tables of around 500-900 items each, and I would rather handle it from a data base.

If installing mongoose keeps showing errors on my terminal, and running npm audit fix —force doesn’t solve it… then I could look into using MYSQL database as well… don’t know if that would be any different anyway…