How to sort an array that is using map method by props in Javascript/React

Question

I have an array called products that is using the map method to list all the elements inside it and i am trying to sort those elements by the price prop. I've tried all types of sort methods and functions but i can't get it to work.

JS

const recentprods = products.map(prod => {
  return <TableRow name={prod.name} price={prod.price} />
})

I tried:

const recentprods = products.map(prod => {
  return <TableRow name={prod.name} price={prod.price} />
}).sort((a,b) => a.price < b.price)

and

recentprods.sort()

Essentially how could one sort a react component by its props?

kind user · Accepted Answer · 2020-09-26 21:26:15Z

5

You should apply the sorting before mapping.

const recentprods = products
  .sort((a,b) => a.price - b.price)
      // if you want to change the sorting direction: b.price - a.price
  .map(prod => {
     return <TableRow name={prod.name} price={prod.price} />
  });

edited Sep 26, 2020 at 21:26

answered Sep 26, 2020 at 21:09

kind user

42k8 gold badges69 silver badges78 bronze badges

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

5 Comments

Uriel Over a year ago

If i apply sorting before or after map, i can't access prod.price, prod.name, etc. How would i do that then?

Uriel Over a year ago

Should i do another map over the sort method ?

kind user Over a year ago

@Uriel Why you cant access price and name? They are available inside the map function scope. Just copy and paste my code.

kind user Over a year ago

@Uriel Just updated my answer, probably the gt > sign was the issue. The minus operation should sort it out.

Ross Sheppard Over a year ago

The sort method must return a number not a boolean as shown in my answer. :D

Ross Sheppard · Accepted Answer · 2020-09-26 21:21:54Z

2

You want to normalize, sort, and otherwise alter your data as you see fit before applying it to React components. In the following case, the products array holds individual objects each with a price property, so sort the products array beforehand then map over the items.

The .sort method sorts the elements of an array in place and returns the sorted array. The chained .map method will iterate over the sorted array in the order prescribed.

I believe the following is a valid solution. Note that price is seen as a number. If it isn't, the sort may not work correctly.

const recentprods = products
  .sort((a, b) => a.price - b.price)
  .map(item => <TableRow name={item.name} price={item.price} />);

answered Sep 26, 2020 at 21:21

Ross Sheppard

8701 gold badge6 silver badges14 bronze badges

Comments

İlker İlker · Accepted Answer · 2020-09-26 21:24:04Z

So, yeah basically you need to sort it first and then map it, I've build an example for you:

constructor(props) {
    super(props);

    this.state = {
      products: [
        { name: 'Product 2', price: 2 },
        { name: 'Product 6', price: 6 },
        { name: 'Product 1', price: 1 },
        { name: 'Product 3', price: 3 },
        { name: 'Product 7', price: 7 },
        { name: 'Product 4', price: 4 },
        { name: 'Product 8', price: 8 },
        { name: 'Product 5', price: 5 },
      ],
    };
  }

  render() {
    return (
      <div>
        <h1>ONLY MAPPED</h1>
        {this.state.products.map((prod, i) => {
          return (
            <li key={i}>
              {prod.name} and its price: {prod.price}
            </li>
          );
        })}

        <h1>BOTH SORTED AND MAPPED.</h1>
        {this.state.products
          .sort((first, second) => {
            return first.price > second.price ? 1 : -1;
          })
          .map((prod, i) => {
            return (
              <li key={i}>
                {prod.name} and its price: {prod.price}
              </li>
            );
          })}
      </div>
    );
  }

Here you can check out the output

sasha romanov · Accepted Answer · 2020-09-26 21:40:33Z

consider we have an array of objects with name and price properties.

const Products = [

{name:"p1",price: 5},
{name:"p2",price: 3},
{name:"p3",price: 2},
{name:"p4",price: 7},

]

We need to sort the Products array in ascending order by using its price property.

console.log(Products.sort((a,b) =>  a.price-b.price )); // descending b.price-a.price

output - >

[
  {name: "p3", price: 2},
  {name: "p2", price: 3},
  {name: "p1",  price: 5},
  {name: "p4", price: 7}
]

Now you can call map function with jsx element you want to add

Products.sort((a,b) =>  a.price-b.price ).map(data => {
   return <TableRow name={prod.name} price={prod.price} />;
});

PS: YOU can use this function directly in your code or use a helper function this way you make sure its sorted jsx.

Collectives™ on Stack Overflow

How to sort an array that is using map method by props in Javascript/React

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related