Cant get .map on react standalone to show content-CodePudding

Below is my code from my first react standalone app I am trying to create. In the context the information is set up in an object in this type of formation {users: [{ name:"peter", email: "[email protected]", password: "peter", balance:100 }] This is my first time using the .map so I am unsure where I am going wrong when I load the page the navbar and everything comes up but the rest is blank and there are no errors in the console.

function AllData() {
  const ctx = React.useContext(UserContext);
  const users = ctx.users;

  {JSON.stringify(ctx)}
  
  return (
    users.map((user) => {
    <table >
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
          <th scope="col">Password</th>
          <th scope="col">Balance</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">{user.name}</th>
          <td>{user.email}</td>
          <td>{user.password}</td>
          <td>{user.balance}</td>
        </tr>
      </tbody>
    </table>;
  }));
}

CodePudding user response：

import { useMemo } from 'react'

function AllData() {
  const ctx = React.useContext(UserContext);
  const users = ctx.users;

  {JSON.stringify(ctx)}

const displayTable = useMemo(
() =>
{
  return users.map((user) => {
     return (
     <table >
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
          <th scope="col">Password</th>
          <th scope="col">Balance</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">{user.name}</th>
          <td>{user.email}</td>
          <td>{user.password}</td>
          <td>{user.balance}</td>
        </tr>
      </tbody>
    </table>
   }))
  )
  },
  [users]
)


  return displayTable
}

CodePudding user response：

the map function need to be returned.

You can directly return the content with parenthesis because it's a multiline.

  return users.map((user) => (
    <table >
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
          <th scope="col">Password</th>
          <th scope="col">Balance</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">{user.name}</th>
          <td>{user.email}</td>
          <td>{user.password}</td>
          <td>{user.balance}</td>
        </tr>
      </tbody>
    </table>;
  )
));