why is sorting of array not working in reactjs even though it comes already sorted from backend?

Question

I have an array that looks similar to this

const chapters= [
   { index:1, title:'chapter-1', lessons:[] }
   { index:2, title:'chapter-2', lessons:[] }
   { index:3, title:'chapter-3', lessons:[] }
]

And this comes already sorted from backend on the basis of index
Now I want to create a state of chapters array in react by this approach

chapters.forEach(chapter=>{
   this.setState((prevState) => {
            return {
              ...prevState,
              chapters: [
                ...prevState.chapters,
                {
                  chapterTitle: chapter.title,
                  chapterIndex: chapter.index,
                  lessons,
                },
              ],
            };
          });
});

the problem is the state is not sorted. I even tried to sort the states after they have been written once. For that I follwed this code i found in stackoverflow

const sortedChapters= this.state.chapters.sort((a, b) =>
            a.index > b.index ? 1 : b.index > a.index ? -1 : 0
          );
this.setState({ chapters: sortedChapters});

But no luck. please tell me what I am doing wrong here?

I can't explain why it isn't retaining the order from your API call, but sort does mutate the original array. So your setState is probably not triggering a re-render. This could be part of your problem. — Brian Thompson
– Brian Thompson, Commented Jun 5, 2020 at 19:10
I tried using for loop instead of foreach loop,and it works fine,can you explain why this happens? — Kritish Bhattarai
– Kritish Bhattarai, Commented Jun 5, 2020 at 19:12
And is there any way I can stick to forEach because it seems faster than for loop — Kritish Bhattarai
– Kritish Bhattarai, Commented Jun 5, 2020 at 19:14

Josh Lind · Accepted Answer · 2020-06-05 19:19:04Z

4

You should almost never set state in a forEach loop. Try this:

const chaptersFromBackend = [
   { index:1, title:'chapter-1', lessons:[] }
   { index:2, title:'chapter-2', lessons:[] }
   { index:3, title:'chapter-3', lessons:[] }
];

const chaptersFormatted = chaptersFromBackend.map(chapter => {
   return {chapterTitle: chapter.title, chapterIndex: chapter.index, lessons: chapter.lessons};
});

this.setState({chapters: chaptersFormatted});

Because of the way react works, the last line wont mess with any other properties you have in your state. I.e. state.foo will be untouched.

edited Jun 5, 2020 at 19:19

answered Jun 5, 2020 at 19:15

Josh Lind

1263 bronze badges

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

1 Comment

Brian Thompson Over a year ago

This is a much better approach than calling multiple setStates

Collectives™ on Stack Overflow

why is sorting of array not working in reactjs even though it comes already sorted from backend?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related