how to sort an object alphabetically within an array, in React.js

Question

I am making an app using React.js and firebase where users can enter the name, and the person's address.

The object in firebase looks like this:

L1NSTjqA10Qc85d7Kcc - name: John Doe, - address: 1 Maple Ave

I have printed the name, and address successfully onto the DOM, but i would like to sort it alphabetically, by the name.

So my list would look like this for example:

Jane Doe - 34 Green Street
John Doe - 1 Maple Ave
Riley Smith - 3 Happy Street

Here is my JSX so far, for when mapping over the array of objects, on the parent component:

<ul>
  {this.state.contacts.map((res)=> <List data={res}/>)}
</ul>

and just in case, here is my componentDidMount:

componentDidMount() {
  const dbRef = firebase.database().ref();

  dbRef.on("value", (firebaseData) => {
    const itemsArray = [];
    const itemsData = firebaseData.val();
    for (let itemKey in itemsData) {
      itemsArray.push(itemsData[itemKey])
    }
    this.setState({ contacts: itemsArray})
  })
}

I have tried to do the following, from another stack overflow forum, however it did not work:

const myData = [].concat(this.state.contacts)
  .sort((a,b)=> a.name > b.name
  .map((res)=> <List data={res}/>);

Answer 1

The logic part where you are trying to sort and then map can be done like this.

const myData = this.state.contacts
 .sort(function(a, b) {
  if(a.name.toLowerCase() < b.name.toLowerCase()) return -1;
  if(a.name.toLowerCase() > b.name.toLowerCase()) return 1;
  return 0;
 })
 .map((item, i) => <List key={i} data={item} />);

Or if you want to do it even shorter you can do it like this.

const myData = this.state.contacts
 .sort((a, b) => a.name.localeCompare(b.name))
 .map((item, i) => <List key={i} data={item} />);

localeCompare function is a method of String

In your method called

dbRef.on("value", (firebaseData) => {
  this.setState({ 
      contacts: Array.from(firebaseData.val()).sort((a, b) => a.name.localeCompare(b.name))})
  });
}

In your render method do the following

 render () {
    return (
      <ul>
       {
        this.state.contacts.map((item, i) => <List key={i} data={item} />)
       }
      </ul>
    );
 }

Does this help?