sort an array with react hooks

Question

I'm doing a simple sort of an array with react hooks, but its not updating state. Can anyone point out what I'm going here?

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const dogs = [{ name: "fido", age: 22 }, { name: "will", age: 50 }];

function App() {
  const [dogList, setDogList] = useState(dogs);

  const sortByAge = () => {
    const sorted = dogList.sort((a, b) => {
      return b.age - a.age;
    });
    setDogList(sorted);
    alert(sorted[0].name);
  };

  return (
    <div>
      {dogs.map((dog, i) => {
        return <p key={i}>{dog.name}</p>;
      })}
      <div onClick={sortByAge}>sort by age</div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

do you have a code example?

seattleguy
– seattleguy

2019-09-24 20:48:07 +00:00
Commented Sep 24, 2019 at 20:48 — seattleguy
– seattleguy, Commented Sep 24, 2019 at 20:48

acdcjunior · Accepted Answer · 2019-09-24 20:47:40Z

17

First: because Array.prototype.sort() is in place, clone before you sort:

const sorted = [...dogList].sort((a, b) => {
  return b.age - a.age;
});

Without this the change detection will not detect the array changed.

You call map on dogs. Fix:

  return (
    <div>
      {dogList.map((dog, i) => {
        return <p key={i}>{dog.name}</p>;
      })}
      <div onClick={sortByAge}>sort by age</div>
    </div>
  );

Demo: https://jsfiddle.net/acdcjunior/kpwb8sq2/1/

answered Sep 24, 2019 at 20:47

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

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

4 Comments

seattleguy Over a year ago

I knew it was something related to this ty!

D.Hodges Over a year ago

@acdcjunior I'm having the same problem. I tried your solution but it didn't work. Woud you mind taking a look at my Stack post stackoverflow.com/questions/75667791/…

Cjmaret Over a year ago

Can you explain why spreading the state into an array with the spread operator ([...dogList].sort) is different from just using dogList.sort?

acdcjunior Over a year ago

@Cjmaret because the .sort methods sorts "in place", meaning it changes the original array. Doing [...dogList] creates a clone of the original array and then sorts the clone. This leaves the original array unmodified.

Jorge · Accepted Answer · 2019-09-25 18:27:56Z

3

const dogs = [{ name: "fido", age: 22 }, { name: "will", age: 50 }];
class Application extends React.Component {
  state = {dogList: dogs};

  sortByAge = () => {
    const sorted = this.state.dogList.sort((a, b) => {
      return b.age - a.age;
    });
    this.setState({dogList: sorted});
  };

  render() {
    return (
      <div>
        {this.state.dogList.map((dog, i) => {
          return <p key={i}>{dog.name}</p>;
        })}
        <button onClick={this.sortByAge}>sort by age</button>
      </div>
    );
  }
}
React.render(<Application />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="root"></div>

This is the code using hooks

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

const dogs = [{ name: "fido", age: 22 }, { name: "will", age: 50 }];
function Application() {
  const [dogList, setDogList] = useState(dogs);
  const sortByAge = () => {
    const sorted = dogList.sort((a, b) => {
      return b.age - a.age;
    });
    setDogList(sorted);
  };
  return (
    <div>
      {dogList.map((dog, i) => {
        return <p key={i}>{dog.name}</p>;
      })}
      <button onClick={sortByAge}>sort by age</button>
    </div>
  );
}

ReactDOM.render(<Application />, document.getElementById('root'));

edited Sep 25, 2019 at 18:27

answered Sep 24, 2019 at 21:15

Jorge

1,3361 gold badge11 silver badges23 bronze badges

4 Comments

Miro J. Over a year ago

Nice answer. Just add some explanation and context next time.

evolutionxbox Over a year ago

Why did you provide an answer using a class component when the request was for a solution using hooks? (Your answer is not wrong btw)

Jorge Over a year ago

@evolutionxbox. because I want to show you a live example with code snippet. so I use class component. but if you want I will provide example which uses the hooks.

evolutionxbox Over a year ago

No no that’s fine. It just seemed odd to me that’s all

Sherothkar · Accepted Answer · 2022-12-29 09:49:38Z

1

sort by name example...

const dogs = [{ name: "bido", age: 22 }, { name: "aill", age: 50 }, { name: "test", age: 90 }];

function App() {
  const [dogList, setDogList] = React.useState(dogs);
  function compare(a, b) 
{
  if (a.name > b.name) return 1;
  if (a.name < b.name) return -1;
  return 0;
}
  const sortByAge = () =>
{

    const sorted = [...dogList].sort(compare);//calling compare function
    setDogList(sorted);//storing sorted values
    
  };

  return (
    <div>
      {dogList.map((dog, i) => {
        return <p key={i}>{dog.name}{dog.age}</p>;
      })}
      <div onClick={sortByAge}>sort by age</div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

edited Dec 29, 2022 at 9:49

answered Apr 20, 2022 at 13:33

Sherothkar

1411 silver badge9 bronze badges

Collectives™ on Stack Overflow

sort an array with react hooks

3 Answers 3

4 Comments

4 Comments

sort by name example...

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

sort by name example...

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related