I'm trying to fetch data from a server using useEffect react hook

Question

I'm trying to fetch data from a server using the fetch api and displaying this data in an unordered list using uuidv4 as the key, im trying to do this using react's useEffect hook, however, it fetches the data but then it says all my keys are the same, i think useEffect is the cause and i tried adding as the second argument an empty array to prevent the rerendering but then its saying im missing a dependency and when i put the dependency in it rerenders and the uuid's are the same again. i'm not sure what to do im relatively new to hooks.

    import React, { useState, useEffect } from "react";
    import "./App.css";
    const uuidv4 = require("uuid/v4");

    function App() {
      const [country, setCountry] = useState({
        country: []
      });

      useEffect(() => {
        console.log("fetching data");
        fetch("http://localhost:5000/country")
          .then(res => res.json())
          .then(data => setCountry({...country, country: data }));
      }, []);

      return (
        <>
          <ul>
            {country.country.map(item => {
              return <li key={uuidv4}>{item.name}</li>;
            })}
          </ul>
        </>
      );
    }

    export default App;

Why are you setting your states to an object? Try setting it to an empty array: const [country, setCountry] = useState({[]}); — cullanrocks
– cullanrocks, Commented Aug 6, 2019 at 18:51

Will Jenkins · Accepted Answer · 2019-08-06 18:52:19Z

1

I think you have to call it to generate the uuid:

 return <li key={uuidv4()}>{item.name}</li>;

answered Aug 6, 2019 at 18:52

Will Jenkins

9,9371 gold badge30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

charlietfl Over a year ago

Probably better to map in property of array to prevent different values every render

Satrogan Over a year ago

Im getting this now. Line 12: Assignments to the 'country' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect react-hooks/exhaustive-deps

Will Jenkins Over a year ago

' Assignments to the 'country' variable from inside React Hook useEffect will be lost after each render.' - no they won't, not if they're assigned via your useState hook

Satrogan Over a year ago

thats the warning in the console

Will Jenkins Over a year ago

that warning is because you have too many uses of country - your main stateObject and the inner array shouldn't have the same variable names

adryanbarbe · Accepted Answer · 2019-08-06 19:05:47Z

0

Best way to assign or set the keys when you map over a list is to use index, which you can get from map

return (
        <>
          <ul>
            {country.country.map((item, index) => {
              return <li key={index}>{item.name}</li>;
            })}
          </ul>
        </>
      );

answered Aug 6, 2019 at 19:05

adryanbarbe

332 silver badges5 bronze badges

Collectives™ on Stack Overflow

I'm trying to fetch data from a server using useEffect react hook

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related