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

Reactjs – React: I can't print the data fetched

As I wrote above, I can’t print the data recovered from the fetch, I’ve been on this for some time without any results.

I’m new to React and learning how to use hooks.

The error I’m getting is:
Cannot read properties of undefined (reading ‘map’)

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

export default function App() {
  const [users, setUsers] = useState();
  useEffect(async () => {
    await fetch('https://jsonplaceholder.typicode.com/users/').then(response => response.json()).then(data => setUsers(data))
  }, []);

  return (
    <div>
      {
        users.map((user) => {
          <div>{user.name}</div>
        })
      }
    </div>
  )
}

Can you kindly help me?

Tags:

2

Answers


  1. 0
    1. Add a default value as empty array to useState to make sure that map() always exist. (The first render will map on an empty array, which is fine since there is not data yet) 
      const [users, setUsers] = useState([]);
    2. useEffect callback should not be await/async, removed that
    3. You didn’t return anything from your map(), I’ve changed it to: 
      {
  users.map((user) => {
    return <div>{user.name}</div>
  })
}

      Or as the short-hand return style:

      {
  users.map(user => <div>{user.name}</div>)
}

    const { useState, useEffect } = React;

const App = () => {
  const [users, setUsers] = useState([]);
  useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/users/')
          .then(response => response.json())
          .then(data => setUsers(data))
  }, []);
  
  return (
    <div>
      {
        users.map((user) => {
          return <div>{user.name}</div>
        })
      }
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("react"));
    html, body { height: 100vh; }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
    Login or Signup to reply.
  2. 0

    The issue is that users is undefined at the start, you have 2 ways to solve this:

    1. set an empty array as default for users: useState([])
    const [users, setUsers] = useState([]);
    1. show something else like a loading text when users is undefined
    import React, { useEffect, useState } from 'react';
import './App.css';

export default function App() {
  const [users, setUsers] = useState();
  useEffect(async () => {
    await fetch('https://jsonplaceholder.typicode.com/users/').then(response => response.json()).then(data => setUsers(data))
  }, []);

  return (
    <div>
      {!users && "loading users..."}
      {
        users && users.map((user) => {
          <div>{user.name}</div>
        })
      }
    </div>
  )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search