Mirage JS json data is console logging but not rendering on the page in React-CodePudding

I am working on a coding assessment and running into a problem when it comes to rendering dummy data from Mirage JS on my page. When I console log the data I'm looking for it shows up fine in the console but I can't figure out why it's not rendering on the page.

Here's the server.js

import { createServer, Model } from "miragejs";
import faker from "faker";
import avatar from "./avatar.png";

export function makeServer({ environment = "test" } = {}) {
  let server = createServer({
    environment,
    models: {
      employee: Model,
    },
    seeds(server) {
      for (let i = 0; i < 10; i  ) {
        server.create("employee", {
          id: faker.datatype.uuid(),
          firstName: faker.name.firstName(),
          lastName: faker.name.lastName(),
          email: faker.internet.email(),
          phone: faker.phone.phoneNumber(),
          bio: faker.lorem.paragraph(),
          avatar: avatar,
          address: {
            streetAddress: `${faker.address.streetAddress()} ${faker.address.streetName()}`,
            city: faker.address.city(),
            state: faker.address.stateAbbr(),
            zipCode: faker.address.zipCode(),
          },
        });
      }
    },
    routes() {
      this.namespace = "api";
      this.get(
        "/employees",
        (schema) => {
          return schema.employees.all();
        },
        { timing: 1000 }
      );
      this.patch(
        "/employees/:id",
        (schema, request) => {
          const attrs = JSON.parse(request.requestBody);
          const employee = schema.employees.find(request.params.id);
          employee.update(attrs);
        },
        { timing: 300 }
      );
      this.delete(
        "/employees/:id",
        (schema, request) => {
          const employee = schema.employees.find(request.params.id);
          employee.destroy();
          return new Response();
        },
        { timing: 300 }
      );
    },
  });
  return server;
}

and here's the app.js

import { makeServer } from "./server";
import { useEffect, useState } from "react";

if (process.env.NODE_ENV === "development") {
  makeServer({ environment: "development" });
}

function App() {
  const [employees, setEmployees] = useState([])

  useEffect(() => {
    fetch('/api/employees')
    .then(res => res.json())
    .then(json => setEmployees(json.employees)
    )
  }, [])
  return (
    <div>
      <header>
        <h1>Employees</h1>
      </header>
      {employees.length > 0 ? (
        <table>
          <thead>
            <tr>
              <th>id</th>
              <th>first name</th>
              <th>last name</th>
            </tr>
          </thead>
          <tbody>
            {employees.map(({id, firstName, lastName}) => {
              <tr key={id}>
                <td>{id}</td>
                <td>{firstName}</td>
                <td>{lastName}</td>
              </tr>
          console.log(firstName)
            })}
          </tbody>
        </table>
      ) : (
        <p>No employees</p>
        )}
  </div>
  );
}
export default App;

CodePudding user response：

The problem with your code is here:

 {employees.map(({id, firstName, lastName}) => {
              <tr key={id}>

You do not return the anything from your mapping function so nothing will be rendered to the page. Try adding a return statement like so:

 {employees.map(({id, firstName, lastName}) => {
     console.log(firstName);
     return (
         <tr key={id}>
            <td>{id}</td>
            <td>{firstName}</td>
            <td>{lastName}</td>
          </tr>
        );
  })}

CodePudding user response：

I've made this mistake a million times. You're missing a return statement in the employees.map callback.