How to sort Array Data in ReactJs

Question

class LifeCycleComps extends Component {
  constructor(props) {
      super(props);
      this.state = {
        data: 0,
        names: [{
            name: "sam"
          },
          {
            name: "hammer"
          },
          {
            name: "jellyfish"
          }
        ]
      };

      //below is sortAlphabet function
      sortAlphabet = () => {
        this.setState({
          names: this.state.names.sort()
        });
      };


      //sortNames component
      class SortNames extends Component {
        render() {
          return <span > {
            this.props.names.name
          } < /span>;
        }
      }

<button onClick={this.sortAlphabet}>sort</button>
<ul>
  {this.state.names.map((item, i) => (
  <SortNames key={i} names={item} /> ))}
</ul>

Above is my code. I am not sure what is the main problem. In the above code I want to get sorted names by onClick. But I am not getting any positive results from the above snippet. Please let me know folks what I did wrong?

Does this answer your question? [Sort array of objects by string property value](https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value) — Nick Parsons, Dec 23 '19 at 12:01
Your code doesn't really make sense. You're declaring a class within a class? — dwjohnston, Dec 23 '19 at 12:06
so you need the array of objects to be sorted according to the names value alphabetically inside individual object? — warmachine, Dec 23 '19 at 12:13

score 2 · Accepted Answer · answered Dec 23 '19 at 12:19

You can not directly use sort function in array of object. For that you need to write a sort function or write a callback function which you can modify according your need. Here is working code(https://stackblitz.com/edit/react-31un7h) :

import React, { Component } from 'react';
import { render } from 'react-dom';
const SortNames  = (props) =>  {
        return (
           <span > 
            {props.names.name}
         </span>
        )
}
class LifeCycleComps extends Component {
  constructor(props) {
      super(props);
      this.state = {
        data: 0,
        names: [{
            name: "sam"
          },
          {
            name: "hammer"
          },
          {
            name: "jellyfish"
          }
        ]
      };

  }
   compare = ( a, b ) =>  {
      if ( a.name < b.name ){
        return -1;
      }
      if ( a.name > b.name ){
        return 1;
      }
      return 0;
}
  //below is sortAlphabet function
      sortAlphabet = () => {
        this.setState({
          names: this.state.names.sort(this.compare)
        });
      };
      render(){
        return (
          <div>
          <button onClick={this.sortAlphabet}>sort</button>
            <ul>
              {this.state.names.map((item, i) => (
              <SortNames key={i} names={item} /> ))}
            </ul>
          </div>
        );
      }
}



      //sortNames component


class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
        <LifeCycleComps/>
      </div>
    );
  }
}

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

score 1 · Answer 2 · answered Dec 23 '19 at 12:14

Here is sorted values

let arr = [{
            name: "sam"
          },
          {
            name: "hammer"
          },
          {
            name: "jellyfish"
          }]

function sortIt(x,y) {
  if ( x.name < y.name ){
    return -1;
  }
  if ( x.name > y.name ){
    return 1;
  }
  return 0;
}

arr.sort(sortIt);
console.log(arr);

And here is in reactjs

   sortIt(x,y) {
    if ( x.name < y.name ){
      return -1;
    }
    if ( x.name > y.name ){
      return 1;
    }
    return 0;
  }
  sortAlphabet = () => {
    this.state.names.sort(this.sortIt)
    this.setState({
      names: this.state.names.sort()
    });
  };


  render() {
    return (
      <>
        <button onClick={this.sortAlphabet}>sort</button>
        <ul>
        {this.state.names.map((item, i) => (
        <li key={i} names={item}>{item.name}</li> ))}
      </ul>
      </>
    );

harisu · Answer 3 · 2019-12-23T12:22:03.293

Its to just adapt the javascript code provided in the comments as below.


compare = ( a, b ) => {
  if ( a.name < b.name ){
    return -1;
  }
  if ( a.name > b.name ){
    return 1;
  }
  return 0;
}

     //below is sortAlphabet function
sortAlphabet = () => {
  let objs = [...this.state.names] //create a copy here as you will not want to directly mutate the state by calling sort.
  this.setState({
     names: objs.sort( compare );
  });
};

score 0 · Answer 4 · answered Dec 23 '19 at 12:31

0

I've made an StackBlitz in which you could see the solution. Hope this helps.

answered Dec 23 '19 at 12:31

Alberto Perez

2,561
1
14
21

How to sort Array Data in ReactJs

4 Answers4