How to fetch and rerender the component

Question

Please tell me how to fetch new data into the array using useState. Each time useEffect is using, the array is initialized empty again. I need to pass this array to the table so that when the values change, the table is rendered again

const AccountContainer = () => {
  let [isLoaded, setIsLoaded] = useState(false);
  let [page, setPage] = useState(0);
  let [accData, setAccData] = useState([]);
  useEffect(() => {loadData()}, [page]);

  const loadData = async () => {
    const response = await fetch(API_URL);
    const data = await response.json();
     data.content.map(acc => {     
       setAccData([...accData, acc])
    });

    setIsLoaded(true);
  };


 return (
          <table data={accData} />
 )
};

export default AccountContainer;

added log

[]          AccountContainer.js:30
[]          AccountContainer.js:30
[]          AccountContainer.js:30
[]          AccountContainer.js:30
[]          AccountContainer.js:30
[]          AccountContainer.js:30

https://codesandbox.io/embed/great-rubin-poywh?fontsize=14&hidenavigation=1&theme=dark

Thanks in advance

this <table data=accData /> should be <table data={accData} /> — Hasan Haghniya
– Hasan Haghniya, Commented Jun 17, 2020 at 12:47
Unrelated, but I don't see any reason to wrap loadData in an additional anonymous function. — Dave Newton
– Dave Newton, Commented Jun 17, 2020 at 12:49
can you share console.log(data)? and anyhow you don't need to map it, just to spread it - setAccData(prev => [...prev, ...data]) — Hagai Harari
– Hagai Harari, Commented Jun 17, 2020 at 12:53
you are doing it completely wrong , to push new array , instead of pushing one by one, just do it once like const data = await response.json(); setAcc([...accData, ...data.content]) that's all. — Hasan Haghniya
– Hasan Haghniya, Commented Jun 17, 2020 at 13:44

Hasan Haghniya · Accepted Answer · 2020-06-17 15:03:57Z

here is the solution in the sandbox

// AccountList.jsx
import React from "react";

const AccountList = props => (
  <div>
    {console.warn(props)}
    {props.dataAcc.map(acc => (
      <div>{acc.email}</div>
    ))}
    )
  </div>
);

export default AccountList;

App.jsx

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

const AccountContainer = () => {
  let [isLoaded, setIsLoaded] = useState(false);
  let [page, setPage] = useState(0);
  let [accData, setAccData] = useState([]);
  const API_URL = `https://reqres.in/api/users?page=1`;

  useEffect(() => {
    loadData();
  }, [page]);

  const loadData = async () => {
    const response = await fetch(API_URL);
    const data = await response.json();
    setAccData([...accData, ...data.data]);
    setIsLoaded(true);
  };

  const renderTable = () => {
    if (isLoaded) {
      return (
        <div>
          {console.warn(accData)}
          <AccountList dataAcc={accData} />
        </div>
      );
    } else if (!isLoaded) return "Loading";
  };

  return renderTable();
};

export default AccountContainer;

Collectives™ on Stack Overflow

How to fetch and rerender the component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related