Data is showing up in console but not in screen or in DOM

Question

I wrote this code

import axios from "axios";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import UserInfo from "../components/UserInfo";

const Users = () => {
  const [users, setUsers] = useState(null);

  useEffect(() => {
    console.log("fetching users...");
    axios.get("http://localhost:4000/api/users").then((response) => {
      setUsers(response.data);
      console.log(response.data);
    });
  }, []);

  return (
    <div>
      <h1>Users:</h1>
      <ol>
        {users &&
          users.map((user) => {
            console.log(user.name);
            <li key={user._id} className="w-9/12 my-2">
              {user.name}
              <UserInfo user={user} full={false} />
              <Link>Update</Link> &nbsp;
              <Link>Delete</Link>
            </li>;
          })}
      </ol>
      <Link
        to="/signup"
        className="fixed top-5 right-5 bg-green-500 font-semibold hover:text-white py-2 px-4 border-black rounded"
      >
        Add user
      </Link>
    </div>
  );
};

export default Users;

Here's the UserInfo file

import { useLocation } from "react-router-dom";

const UserInfo = ({ user }, full) => {
  let User = user;
  const location = useLocation();
  if (location.state) {
    User = location.state.user;
    full = true;
  }

  const { name, employee_id, pass } = Company;
  if (full === true) {
    return (
      <div className="text-center">
        <h2>Name:{name}</h2>
        <p>ID: {employee_id}</p>
        <p>Pass: {pass}</p>
      </div>
    );
  } else {
    return (
      <div className="border border-black min-w-min text-center overflow-x-auto hover:bg-blue-400 hover:text-white">
        <h2>Name: {name}</h2>
      </div>
    );
  }
};

export default UserInfo;

I did exactly same thing in another file and thats showing up perfectly but this isn't showing up even in DOM. I tried searching the web and stuff but couldn't get an answer. I don't know what i did wrong. I am using node in the backend. : the output in console the dom

Answer 1

The main problem here is that you are doing this, see the comments in the code

      <ol>
        {users &&
          users.map((user) => {
            // As you used {} to wrap this logic because the console log you need to
            // explicit return the JSX
            console.log(user.name);
            // return before the <li
            <li key={user._id} className="w-9/12 my-2">
              {user.name}
              <UserInfo user={user} full={false} />
              <Link>Update</Link> &nbsp;
              <Link>Delete</Link>
            </li>;
          })}
      </ol>

If you don't want to explicit return you need to remove brackets and only put the jsx, something like this

      <ol>
        {users &&
          users.map((user) => 
            <li key={user._id} className="w-9/12 my-2">
              {user.name}
              <UserInfo user={user} full={false} />
              <Link>Update</Link> &nbsp;
              <Link>Delete</Link>
            </li>;
          )}
      </ol>

Remember that return thing is not something related to React, it is related to how arrow functions work

Hope this answer helps you

Answer 2

Ok so i solved it. The problem was i was using {} after map but i should have used (). Hope this helps someone stuck like me.

Fix was in the Users Component.

Original code:

{users &&
          users.map((user) => {
            console.log(user.name);
            <li key={user._id} className="w-9/12 my-2">
              {user.name}
              <UserInfo user={user} full={false} />
              <Link>Update</Link> &nbsp;
              <Link>Delete</Link>
            </li>;
          })}

Fixed code:

{users &&
          users.map((user) =>(
            <li key={user._id} className="w-9/12 my-2">
              {user.name}
              <UserInfo user={user} full={false} />
              <Link>Update</Link> &nbsp;
              <Link>Delete</Link>
            </li>;
          ))}