Question

0

149

Views

.map is not getting re-rendered after updating the state

I have fetched data using useEffect, and also getting the data on console. I've called the setState method to update the state, but the .map function is not working. Even on the console nothing is happening.

 import React, { useState, useEffect } from "react";


function HomePage() {
  const [isFlipped, setIsFlipped] = useState(false);

  const [cardData, setCardData] = useState([]);

  // useEffect function
  useEffect(async () => {
    const url = "https://rickandmortyapi.com/api/character";

    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        const jsonData = json.results;
        setCardData(jsonData);
        console.log(jsonData);
      } catch (error) {
        console.log("error", error);
      }
    };
    fetchData();
  }, []);

  const handleClick = () => {
    setIsFlipped(!isFlipped);
  };

  return (
    <>
      
      {cardData.map((c) => {
        <h1>{c.id}</h1>;
      })}
     
    </>
  );
}

export default HomePage;

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-04T06:28:41.912Z

Your code has a few errors:

You dont need/ cant use async keyword on useEffect callback, just declare the function and call it.
The main issue, your map never returns anything. if you use curly braces you must use return keyword to return
Not as important, but if you initialize cardData to null, you can check if it is truthy before mapping over it.
As to why nothing shows up in console, setState is async/ a request to update the state for the next render, therefor, the state changes cannot be observed immediately

The following code works in code sandbox let me know if you have any questions.

export default function HomePage() {  {
  const [isFlipped, setIsFlipped] = useState(false);

  const [cardData, setCardData] = useState(null);

  // useEffect function
  useEffect(() => { //removed async here
    const url = "https://rickandmortyapi.com/api/character";

    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        const jsonData = json.results;
        setCardData(jsonData);
        console.log(jsonData);
      } catch (error) {
        console.log("error", error);
      }
    };
    fetchData();
  }, []);

  const handleClick = () => {
    setIsFlipped(!isFlipped);
  };

  return (
    <>
      {cardData && cardData.map((c) => {
        return <h1>{c.id}</h1>; //note here: return keyword
      })}
    </>
  );
}

0

149

.map is not getting re-rendered after updating the state

1 answers

0

Find remote jobs

Andres GPT