fetching data with useState and useEffect in react.js

Question

with this code I'm able to retrieve users' data and console.log it but unable to pass or fetch it into the data array and render users' info using data.map as it console.logs empty array and throws out an error: Uncaught (in promise) TypeError: data.map is not a function. How can I fetch this data to the data array? Thanks in advance!

import React, { useState, useEffect } from 'react';
import './welcome.css';


function Welcome (){
  const [data, setUsers] = useState([])

  useEffect(() => {
    fetch('http://localhost:4000/users')
    .then((res) =>  res.json())
    .then(users => setUsers({users}, console.log(users), console.log(data)))
      
    }
  )
  

  return(
    <div className='welcome'>    
    <ul >
      {data.map(user => 
        <li  className='user' key={user._id}>{user.Username}</li>  
      )}

    </ul>

    <h1>Welcome to GRM</h1> 
    <h1>Explore the music world</h1>

  </div>
  )
}

Answer 1

Remove line

.then(users => setUsers({users}, console.log(users), console.log(data)))

Add This

.then ((res)=>{setUsers(res.data)})

I hope it will work for you

Answer 2

If users is an array, then you only need to pass users to setUsers

import React, { useState, useEffect } from "react";
import "./welcome.css";

function Welcome() {
  const [data, setUsers] = useState([]);

  useEffect(() => {
    fetch("http://localhost:4000/users")
      .then((res) => res.json())
      .then(({ users }) =>
        setUsers(users)
      );
  });

  return (
    <div className="welcome">
      <ul>
        {data.map((user) => (
          <li className="user" key={user._id}>
            {user.Username}
          </li>
        ))}
      </ul>

      <h1>Welcome to GRM</h1>
      <h1>Explore the music world</h1>
    </div>
  );
}

Answer 3

for those who are running into the same problem, here's what worked for me:

export default function Welcome (){
  const [data, setUsers] = useState([])
  useEffect(() => {
    fetch('http://localhost:4000/users')
    .then(res => (res.json()))
    .then(({users}) => setUsers((users)))
  
  }) 
  return(
    <div className='welcome'>    
      <ul>
        {data.map((user) => 
          <li  className='user' key={user._id}>
            {user.Username}
          </li>  
        )}

      </ul>

      <h1>Welcome to GRM</h1> 
      <h1>Explore the music world</h1>

    </div>
   )
}

Unsurprisingly enough it was a matter of the right amount of brackets. Here's what my data retrieved from MongoDB looked like:

{"users":
[{
"_id":"622c6b2e1c9e40c9775a8940",
"Username":"222","Email":"[email protected]",
"Password":"$2b$10$OafBy/2M6a3TZOf/Fslv.u/7tREMGJk6BD.GCiul23giaYh58CTfC",
"Lists":[],"__v":0
},
{
"_id":"622c6b491c9e40c9775a8944",
"Username":"111","Email":"[email protected]",
"Password":"$2b$10$cpqiLxsW70stj/4P5AGKUucvXyRDha6Fy3bpGsz0vg.1p0ia.7Jwi",
"Lists":[],"__v":0
}
]}