Sort a data in ReactJs

Question

I have the next code:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState([
    { name: "Edward", value: 21 },
    { name: "Sharpe", value: 37 },
    { name: "And", value: 45 },
    { name: "The", value: -12 },
    { name: "Magnetic" },
    { name: "Zeros", value: 37 }
  ]);

  const sorting = () => {
    const a = state.sort(function (a, b) {
      if (a.name > b.name) {
        return 1;
      }
      if (a.name < b.name) {
        return -1;
      }
      return 0;
    });
    setState(a);
  };

  return (
    <div className="App">
      <table>
        <tr>
          <th>Firstname</th>
          <th>data</th>
        </tr>
        {state.map((i) => {
          return (
            <tr key={i.name}>
              <td>{i.name}</td>
              <td>{i.value}</td>
            </tr>
          );
        })}
      </table>
      <button onClick={sorting}>sort</button>
    </div>
  );
}

Clicking on the button i want to trigger the next function:

 const sorting = () => {
    const a = state.sort(function (a, b) {
      if (a.name > b.name) {
        return 1;
      }
      if (a.name < b.name) {
        return -1;
      }
      return 0;
    });
    setState(a);
  };

Which should sort the data from table, but it does not happens.
Question: Why my function does not work? ow to solve the issue that i described above? Note: when i will click on the button the data from table should change the order.

do you want to sort the list based on the alphabetical order of name or on the basis of value? — Ketan Ramteke
– Ketan Ramteke, Commented Dec 5, 2020 at 12:39

Ketan Ramteke · Accepted Answer · 2020-12-06 08:21:42Z

Before sorting convert the name to either uppercase or lowercase. After that, you can easily sort it with the help of localeCompare():

let data = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic" },
  { name: "Zeros", value: 37 },
];

data.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));

console.log(data);

Full react app:

import React, { useState, useEffect } from "react";

export default function App() {
  const [state, setState] = useState([
    { name: "Edward", value: 21 },
    { name: "Sharpe", value: 37 },
    { name: "And", value: 45 },
    { name: "The", value: -12 },
    { name: "Magnetic" },
    { name: "Zeros", value: 37 }
  ]);

  const sorting = () => {
    const data = [...state];
    data.sort((a, b) =>
      a.name.toLowerCase().localeCompare(b.name.toLowerCase())
    );
    console.log(data);
    setState(data);
  };

  return (
    <div className="App">
      <table>
        <tr>
          <th>Firstname</th>
          <th>data</th>
        </tr>
        {state.map(i => {
          return (
            <tr key={i.name}>
              <td>{i.name}</td>
              <td>{i.value}</td>
            </tr>
          );
        })}
      </table>
      <button onClick={sorting}>sort</button>
    </div>
  );
}

You can play with the working example here: Stackblitz Link

Collectives™ on Stack Overflow

Sort a data in ReactJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related