Question 187257 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search