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?

Answer 1

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'));

Answer 2

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>
      </>
    );

Answer 3

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 );
  });
};

Answer 4

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