How to create a function for sorting an array of object by some property in reactjs?

maybe you need something like this

The list is your array

the key is key with which you want to sort it

and isAsc is true if you want to sort asc or false if you want to sort with desc

compareStr = key => (a, b) => {
    if (a[key] < b[key]) {
        return -1
    }
    if (a[key] > b[key]) {
        return 1
    }
    return 0
}

sortArray = (list, key, isAsc) => {
    if (!list || !list.length) return []
    const duplicate = [...list]
    if (typeof duplicate[0][key] === 'number' || Number(duplicate[0][key])) {
        duplicate.sort((a, b) =>
            isAsc
                ? Number(a[key]) - Number(b[key])
                : Number(b[key]) - Number(a[key])
        )
        return duplicate
    }
    duplicate.sort(compareStr(key))
    if (isAsc) return duplicate
    return duplicate.reverse()
}

This will work fine if, in your array, your numbers will be numbers, not strings. So you can or change numbers types or you can add your own check for number case instead of this if (typeof duplicate[0][key] === 'number') {

Here's a neat little trick. You don't need to do the sorting in the event handler - you can just do it in your render, and only maintain the information about the sort property and order. Additionally, you only need to code one version of the sorter for each of the properties by just multiplying the sorters' return value with -1 if you want to change the order to descending.

First, I'd extract the sorters themselves:

const sorters = {
  level: (a, b) => parseInt(a.level) - parseInt(b.level),
  generation: (a, b) => parseInt(a.generation - b.generation),
  name: (a, b) => a.name.localeCompare(b.name),
  area: (a, b) => a.area.localeCompare(b.area),
};

Easy enough. Then, I'd put these into your state, along with the sort order:

const SortOrder = {
  ASC: 1,
  DESC: -1,
};

// ...

state = {
  sortOrder: SortOrder.ASC,
  sortProperty: "level",
  array: [],
  // ...
};

Then, in render(), you just take your array and sort it according to the sorter:

render() {
  const { array, sortProperty, sortOrder } = this.state;
  const arraySorter = sorters[sortProperty];
  const displayArray = [...array].sort(
    (a, b) => arraySorter(a, b) * sortOrder
  );

  return (
    <>
      {displayArray.map((item) => (
        <p key={item}>{item}</p>
      ))}
    </>
  );
}

Notice how we take the correct sorter function from sorters, and multiply it by the current sortOrder. This lets us change the ascending/descending order by just changing between 1 and -1, as with -1, the order is reversed.

Then finally, in sortArray, we just update the state with the new sort property and sort order:

sortArray = (property, order) => {
  this.setState({
    sortProperty: property,
    sortOrder: order === "asc" ? SortOrder.ASC : SortOrder.DESC,
  });
};

Here the API is the same as with yours, i.e. () => this.sortArray('level', 'desc'), but honestly you could just pass order directly to sortOrder and call it like () => this.sortArray('level', SortOrder.DESC). Or drop the order entirely from the function since you could now change it separately from the property.

All together:

const SortOrder = {
  ASC: 1,
  DESC: -1,
};

const sorters = {
  level: (a, b) => parseInt(a.level) - parseInt(b.level),
  generation: (a, b) => parseInt(a.generation - b.generation),
  name: (a, b) => a.name.localeCompare(b.name),
  area: (a, b) => a.area.localeCompare(b.area),
};

class MyComponent extends React.Component {
  state = {
    sortOrder: SortOrder.ASC,
    sortProperty: "level",
    array: [],
    // ...
  };

  sortArray = (property, order) => {
    this.setState({
      sortProperty: property,
      sortOrder: order === "asc" ? SortOrder.ASC : SortOrder.DESC,
    });
  };

  render() {
    const { array, sortProperty, sortOrder } = this.state;
    const arraySorter = sorters[sortProperty];
    const displayArray = [...array].sort(
      (a, b) => arraySorter(a, b) * sortOrder
    );

    return (
      <>
        {displayArray.map((item) => (
          <p key={item}>{item}</p>
        ))}
      </>
    );
  }
}