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) — Alesj, Nov 24 '18 at 03:20
https://stackoverflow.com/questions/43572436/sort-an-array-of-objects-in-react-and-render-them — Alesj, 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

45,811
27
120
136

answered Nov 24 '18 at 03:54

Иван

55
7

How to sort a component in React

1 Answers1