React.js sort data in useEffect

Question

I have a useState hook name stories.

const [stories, setStories] = useState([
{
      name: "1st Story",
      sid: 1,
      apartmentDetails: [],
},{
      name: "2nd Story",
      sid: 2,
      apartmentDetails: [],
}
]);

Now I want to add apartmentDetails in 1st Story. To achieve this functionality I am doing the following.

let story = stories.find((story) => story.sid == storyID);
    const storyWithDetails = {
      ...story,
      appartmentDetails: [
        ...story.appartmentDetails,
        {
          apartment_name: apratmentName,
          apartment_num: apratmentNum,
          apartment_type: apartmentType,
          areaDetails: [],
        },
      ],

But it's rearranging the stories by putting the 1st Story at the last of the array. I used useEffect hook to sort it

  useEffect(() => {
    setStories(stories.sort((a, b) => parseInt(a.sid) - parseInt(b.sid)));
    console.log(stories);
  }, [stories]);

the log is returning me the sorted stories but in HTML/JSX it's not working.

what do you mean by it doesn't work, what's your output in the page — midugh
– midugh, Commented May 11, 2021 at 16:36

Shri Hari L · Accepted Answer · 2021-05-12 04:52:09Z

1

Array.sort() sorts the array in-place.

Try storing it to another variable and setting the state.

Like,

useEffect(() => {
    const newStories = [...stories];
    newStories.sort((a, b) => parseInt(a.sid) - parseInt(b.sid));
    setStories(newStories);
  }, [stories]);

Caution: setStories() inside a useEffect() with dependency as [stories] can cause infinite loop. But the core idea is same above.

Refer: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

edited May 12, 2021 at 4:52

answered May 11, 2021 at 16:53

Shri Hari L

4,9732 gold badges8 silver badges22 bronze badges

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

9 Comments

Hamza Afzal Over a year ago

Not Working the cdode

Shri Hari L Over a year ago

Did you try the edited code too? Isn't that too working?

Hamza Afzal Over a year ago

If I edit it works but it should work automatically

Arjun Nair Over a year ago

array.sort returns a sorted array as well actually.. right?

Arjun Nair Over a year ago

@HamzaAfzal the edited code works because you are basically using the mutated array. React doesnt understand that the state has changed if you mutate the state. So you need to use the spread operator to create a new array and the sort that array

|

Collectives™ on Stack Overflow

React.js sort data in useEffect

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related