I'm trying to sort my array of objects but its not working

Question

I'm trying to sort my array of objects but its not working. Can someone see why its not working?

    function App(){
      let products = [
        {
          name: "LED",
          price: 50000,
          status: true,
          image: "images/products/Krunch-Combo-kfc.png"
        },
        {
          name: "Bike",
          price: 40000,
          status: false,
          image: "images/products/Krunch-Combo-kfc.png"
        },
        {
          name: "Mobile",
          price: 60000,
          status: true,
          image: "images/products/Krunch-Combo-kfc.png"
        },
        {
          name: "Apple Watch",
          price: 6000,
          status: true,
          image: "images/products/Krunch-Combo-kfc.png"
        }
      ];
    
      return (
        <div>
    
          <ul>
            {
              products.sort((a, b) => parseFloat(a.price) - parseFloat(b.price))
            }
          </ul>
        </div>
  )
}

export default App;

This is the error I'm getting. Error: Objects are not valid as a React child (found: object with keys {name, price, status, image}). If you meant to render a collection of children, use an array instead.

It's exactly as the error says. Plain objects can't be rendered. Figure out how you want the objects to display. — CertainPerformance, Mar 21 '21 at 05:41
What are you trying to render? The names of each item? If so, you need to use `.map()` on your array _of objects_ and return an element that can be rendered such as JSX — Nick Parsons, Mar 21 '21 at 05:41
I want to sort my objects with respect to price. Just like this https://stackoverflow.com/questions/979256/sorting-an-array-of-objects-by-property-values — Usman Akram, Mar 21 '21 at 05:49
It's work but you can`t render plain object. Use map function to create array of JSX elements ```products.sort(...).map(item=>
{item.name}:{item.price}
``` — Matiiv Vasyl, Mar 21 '21 at 08:31

Punit Makwana · Answer 1 · 2021-03-21T06:27:27.847

import { useMemo } from "react";

let products = [
  {
    name: "LED",
    price: 50000,
    status: true,
    image: "images/products/Krunch-Combo-kfc.png"
  },

  {
    name: "Bike",
    price: 40000,
    status: false,
    image: "images/products/Krunch-Combo-kfc.png"
  },
  {
    name: "Mobile",
    price: 60000,
    status: true,
    image: "images/products/Krunch-Combo-kfc.png"
  },
  {
    name: "Apple Watch",
    price: 6000,
    status: true,
    image: "images/products/Krunch-Combo-kfc.png"
  }
];

function App() {
  const memoizedProducts = useMemo(
    () =>
      products.sort((a, b) => {
        const priceA = parseFloat(a.price);
        const priceB = parseFloat(b.price);

        if (priceA < priceB) return -1;
        if (priceA > priceB) return 1;

        return a.name.localeCompare(b.name);
      }),
    []
  );

  return (
    <div>
      <ul>
        {memoizedProducts.map(({ name, price }, index) => (
          <li key={index}>
            {name} - {price}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

score 0 · Answer 2 · answered Mar 21 '21 at 08:13

I think this is what you are looking for:

function App() {
  let products = [
    {
      name: "LED",
      price: 50000,
      status: true,
      image: "images/products/Krunch-Combo-kfc.png",
    },
    {
      name: "Bike",
      price: 40000,
      status: false,
      image: "images/products/Krunch-Combo-kfc.png",
    },
    {
      name: "Mobile",
      price: 60000,
      status: true,
      image: "images/products/Krunch-Combo-kfc.png",
    },
    {
      name: "Apple Watch",
      price: 6000,
      status: true,
      image: "images/products/Krunch-Combo-kfc.png",
    },
  ];

  const sortedProducts = products.sort(
    (productA, productB) =>
      parseFloat(productA.price) - parseFloat(productB.price)
  );

  return (
    <div className="app">
      <ul>{JSON.stringify(sortedProducts)}</ul>
    </div>
  );
}

export default App;

In order to render the products in jsx in the DOM use the higher order array function map.

Good luck let me know if this is what you was looking for

I'm trying to sort my array of objects but its not working

2 Answers2

I think this is what you are looking for: