State update doesn't re-render component in ReactJS

Question

I have a component in which I have this useEffect:

  const [charactersInfo, setCharactersInfo] = useState(null);

  const [page, setPage] = useState(1);

  useEffect(() => {
    fetch(`https://api/api/character/?page=${page}`)
      .then((res) => res.json())
      .then((result) => {
        setCharactersInfo(result);
      });
  }, [page]);

whenever my page state updates there is different data coming from the api as expected. but issue is whenever new setCharactersInfo(result) happens, it does not display the new data.

I am passing my setPage state function to this component as a prop:

   <PaginationButtons
          data={charactersInfo}
          updatePage={(number) => {
            setPage(number);
          }}
        />

This is re-usable component which generates buttons and it works correctly everywhere except this specific component. any suggestions please?

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

import "./PaginationButtons.css";

function PaginationButtons({ data, updatePage }) {
  const [buttonsArr, setButtonsArr] = useState([]);

  useEffect(() => {
    const finalArray = [];
    const { info } = data;
    // Not the best solution for situations in which
    // info.pages is big number(e.x 1000000) but since we know that
    // it mostly will be 34 or less so we can just loop through it :)
    for (let i = 1; i < info.pages + 1; i++) {
      finalArray.push(
        <button
          className="page_button"
          onClick={() => updatePage(i)}
          key={Math.random()}
        >
          {i}
        </button>
      );
    }
    setButtonsArr(finalArray);
  }, []);
  return <div className="button_container">{buttonsArr.map((el) => el)}</div>;
}

export default PaginationButtons;

data prop is an object which contains various of stuff and on the them is the number of pages that should be displayed. in this specific case it 34 for so I use state and useEffect to loop through this number and store buttons in the state array and map it afterwards

Can you update your question to include all relevant code? Can you share PaginationButtons component code? — Drew Reese
– Drew Reese, Commented Aug 22, 2021 at 7:27
@DrewReese I updated the question with PaginationButtons code — user14587589
– user14587589, Commented Aug 22, 2021 at 7:28
I think you are missing data dependency in useEffect of PaginationButtons — user11823877
– user11823877, Commented Aug 22, 2021 at 7:33

Amruth · Accepted Answer · 2021-08-22 07:45:31Z

1

You should handle data change in your child component as well. pass data to useEffect dependency list.

 useEffect(() => {
    const finalArray = [];
    const { info } = data;
    // Not the best solution for situations in which
    // info.pages is big number(e.x 1000000) but since we know that
    // it mostly will be 34 or less so we can just loop through it :)
    for (let i = 1; i < info.pages + 1; i++) {
      finalArray.push(
        <button
          className="page_button"
          onClick={() => updatePage(i)}
          key={Math.random()}
        >
          {i}
        </button>
      );
    }
    setButtonsArr(finalArray);
  }, [data]);

This should help you, no need to maintain state. and i see pages is not array its just key value pair.

function PaginationButtons({ data, updatePage }) {
 const { info : { pages } } = data;
  return (
    <div className="button_container">
       <button
          className="page_button"
          onClick={() => updatePage(pages || 0)}
          key={pages}
        >
          {pages || 0}
        </button>
    </div>
  );
}

edited Aug 22, 2021 at 7:45

answered Aug 22, 2021 at 7:30

Amruth

5,9122 gold badges30 silver badges41 bronze badges

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

2 Comments

user14587589 Over a year ago

sadly it didn't fix it :(

Amruth Over a year ago

pls check new ans

Drew Reese · Accepted Answer · 2021-08-22 08:01:37Z

1

The useEffect in PaginationButtons is using an empty dependency so it doesn't update when the data prop updates. From what I can tell you don't need the buttonsArr state anyway. It's also anti-pattern to store derived state from props. Just map the data array prop to the buttons.

Using random values is probably the least ideal method of specifying React keys. You can use the mapped array index, but you should use a unique property for each page element, or if there isn't one you should augment the data with a generated GUID.

function PaginationButtons({ data, updatePage }) {
  return (
    <div className="button_container">
      {data.?info?.pages?.map((page, i) => (
        <button
          className="page_button"
          onClick={() => updatePage(i)}
          key={i} // <-- or page.id if available
        >
          {i}
        </button>
      ))}
    </div>
  );
}

edited Aug 22, 2021 at 8:01

answered Aug 22, 2021 at 7:33

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

1 Comment

user14587589 Over a year ago

data prop is an object which contains various of stuff and on the them is the number of pages that should be displayed. in this specific case it 34 for so I use state and useEffect to loop through this number and store buttons in the state array and map it afterwards

Farruh Akhrorov · Accepted Answer · 2021-08-22 08:04:30Z

0

As stated in the other answers, you need to add data as a dependency. Also, you don't need to call map on buttonsArr, as you're not doing anything with its elements. Just use buttonsArr itself

answered Aug 22, 2021 at 8:04

Farruh Akhrorov

1

Collectives™ on Stack Overflow

State update doesn't re-render component in ReactJS

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related