How to sort a component in React

Question

I have an element of the sidebar, on the page of my application I want to sort them by the number of likes. How can I implement sorting at the stage of the map operation, so that the components are drawn correctly?

 return (
        <section>
            <Popular/>
            <div>
                {this.props.object.map((summary, i) =>
                    <SideBarPost id={summary.id}
                                 firstName={summary.User.firstName}
                                 lastName={summary.User.lastName}
                                 title={summary.title}
                                 createdAt={summary.createdAt}
                                 likes={summary.likes.length}
                                 key={i}
                    />)
                }
            </div>
         </section>

For `sort` the array on the `like` key then use the `map` to generate the component. — Hassan Imam, Nov 24 '18 at 02:55
You can use something like this `this.props.object.sort((a,b) => b.likes.length - a.likes.length).map(/*component logic here*/);` — Hassan Imam, Nov 24 '18 at 03:18
You can use regular [sort array function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) — Alejandro, Nov 24 '18 at 03:20
https://stackoverflow.com/questions/43572436/sort-an-array-of-objects-in-react-and-render-them — Alejandro, Nov 24 '18 at 03:21

score 1 · Accepted Answer · edited Apr 16 '19 at 05:18

1

Hassan Imam's solution in the comments helped:

You can use something like this this.props.object.sort((a,b) => b.likes.length - a.likes.length).map(/*component logic here*/);

edited Apr 16 '19 at 05:18

Bhargav Rao

50,140
28
121
140

answered Nov 24 '18 at 03:54

Иван

55
7

score 0 · Answer 2 · answered Jan 26 '23 at 10:08

0

const filter1 = [...users].sort((a,b)=> a.name.localeCompare(b.name)) setUsers(filter1)

answered Jan 26 '23 at 10:08

DianaS pencer

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 27 '23 at 15:57
can you please explain your code ? – Ahmed Sbai Jan 31 '23 at 20:56

How to sort a component in React

2 Answers2