How to map out data from api

Question

import logo from './logo.svg';
import './App.css';
import React, { useState, useEffect } from 'react'

function App() {
  const [Users, fetchUsers] = useState([])

  const getData = () => {
    fetch('https://api.hatchways.io/assessment/students')
      .then((res) => res.json())
      .then((res) => {
        console.log(res)
        fetchUsers(res)
      })
  }

  useEffect(() => {
    getData()
  }, [])

  //
  return (
    <div className="App">
      <header className="App-header">
        <ul>
        {Users.map((item, i) => {
          return <li key={i}>{item.city}</li>
        })}
      </ul>
      </header>
    </div>
  );
}

export default App;

It seems to console out all the data but it doesn't exactly map them out on the screen like I wanted. The bottom is what it appears to have done.

{students: Array(25)}students: Array(25)0: {city: 'Fushë-Muhurr', company: 'Yadel', email: '[email protected]', firstName: 'Ingaberg', grades: Array(8), …}1: {city: 'Sanghan', company: 'Avamm', email: '[email protected]', firstName: 'Clarke', grades: Array(8), …}2: {city: 'Kugesi', company: 'Skalith', email: '[email protected]', firstName: 'Laurens', grades: Array(8), …}3: {city: 'Krajan', company: 'Mybuzz', email: '[email protected]', firstName: 'Berti', grades: Array(8), …}4: {city: 'Huiqi', company: 'Avavee', email: '[email protected]', firstName: 'Mureil', grades: Array(8), …}5: {city: 'Jianghong', company: 'Twinte', email: '[email protected]', firstName: 'Robbyn', grades: Array(8), …}6: {city: 'Sanxi', company: 'Buzzster', email: '[email protected]', firstName: 'Sheena', grades: Array(8), …}7: {city: 'Huancheng', company: 'Edgeblab', email: '[email protected]', firstName: 'Minnnie', grades: Array(8), …}8: {city: 'Luoxiong', company: 'Fadeo', email: '[email protected]', firstName: 'Rory', grades: Array(8), …}9: {city: 'Toulon', company: 'Yakidoo', email: '[email protected]', firstName: 'Lenna', grades: Array(8), …}10: {city: 'Lazo', company: 'Photolist', email: '[email protected]', firstName: 'Rosalynd', grades: Array(8), …}11: {city: 'Bichura', company: 'Babblestorm', email: '[email protected]', firstName: 'Stephanie', grades: Array(8), …}12: {city: 'Chvalšiny', company: 'Mynte', email: '[email protected]', firstName: 'Maire', grades: Array(8), …}13: {city: 'Itaparica', company: 'Photospace', email: '[email protected]', firstName: 'Nicoline', grades: Array(8), …}14: {city: 'Praia da Vitória', company: 'Vitz', email: '[email protected]', firstName: 'Yoshi', grades: Array(8), …}15: {city: 'Sambir', company: 'Twitterwire', email: '[email protected]', firstName: 'Marna', grades: Array(8), …}16: {city: 'Sarulla', company: 'Blogpad', email: '[email protected]', firstName: 'Orelia', grades: Array(8), …}17: {city: 'Ochakovo-Matveyevskoye', company: 'Mydeo', email: '[email protected]', firstName: 'Moses', grades: Array(8), …}18: {city: 'Youxi Chengguanzhen', company: 'Avaveo', email: '[email protected]', firstName: 'Fonsie', grades: Array(8), …}19: {city: 'Limoges', company: 'Tazzy', email: '[email protected]', firstName: 'Skelly', grades: Array(8), …}20: {city: 'Łobżenica', company: 'Quatz', email: '[email protected]', firstName: 'Olly', grades: Array(8), …}21: {city: 'Divo', company: 'Gigazoom', email: '[email protected]', firstName: 'Norby', grades: Array(8), …}22: {city: 'Sortavala', company: 'Eamia', email: '[email protected]', firstName: 'Melody', grades: Array(8), …}23: {city: 'Taupo', company: 'Midel', email: '[email protected]', firstName: 'Janice', grades: Array(8), …}24: {city: 'Krajandadapmulyo', company: 'Wikibox', email: '[email protected]', firstName: 'Geraldine', grades: Array(8), …}length: 25[[Prototype]]:

Answer 1

You are storing the entire response into the state variable Users and the response is an object. You can not apply .map() on the object. Just do something like this.

const getData = () => {
  fetch("https://api.hatchways.io/assessment/students")
    .then((res) => res.json())
    .then((res) => {
      console.log(res);
      fetchUsers(res.students);
    });
};

or below.

<ul>
  Users.students.map((item, i) => {
     return <li key={i}>{item.city}</li>
  })}
</ul>