I have done this in React class components but I need to do this in react function component as I want to learn to convert class components to function components.

  onSortByPlatformAsc = () => {
    var sortByPlatform = this.state.listGames.sort((a, b) =>
      a.platform.localeCompare(b.platform)
    );
    this.setState({ listGames: sortByPlatform });
  };

  onSortByPlatformDesc = () => {
    var sortByPlatform = this.state.listGames.sort((a, b) =>
      a.platform.localeCompare(b.platform)
    );
    this.setState({ listGames: sortByPlatform.reverse() });
  };

CodePudding user response：

Doing so is nearly the same in functional components except for the part where you set the state. You will have a state value and a function to set the state using the useState hook as shown below:

const [games, setGames] = useState({
 listGames:[]
})

Then all you need to do is call the setGames function with the values you want to set as below

    onSortByPlatformAsc = () => {
    var sortByPlatform = this.state.listGames.sort((a, b) =>
      a.platform.localeCompare(b.platform)
    );
    setGames({ listGames: sortByPlatform });
  };

  onSortByPlatformDesc = () => {
    var sortByPlatform = this.state.listGames.sort((a, b) =>
      a.platform.localeCompare(b.platform)
    );
    setGames({ listGames: sortByPlatform.reverse() });
  };

Hopefully this answers your question.

CodePudding user response：

In order to use state in functional component you should use useState() hook. In addition there is no this keyword in functional components.

import { useState } from 'react';
const [listGames, setListGames] = useState([])

onSortByPlatformAsc = () => {
    var sortByPlatform = listGames.sort((a, b) =>
      a.platform.localeCompare(b.platform)
    );

    setListGames(sortByPlatform);
};

onSortByPlatformDesc = () => {
  var sortByPlatform = listGames.sort((a, b) =>
    a.platform.localeCompare(b.platform)
  );

  setListGames(sortByPlatform.reverse());
}

CodePudding user response：

Frankly it isn't that much different.
Differences in this case are mainly:

• this is no longer relevant.
• functions need to be declared like regular functions or consts, etc..
• state is no longer one object, though it can be if you want, but can also be seperate pieces of state, declared by the built-in useState hook.

The code you posted should look like this:

import { useState } from 'react';

function MyComponent() {
  const [listGames, setListGames] = useState([]);

  const onSortByPlatformAsc = () => {
    var sortByPlatform = state.listGames.sort((a, b) =>
      a.platform.localeCompare(b.platform)
    );
    setListGames(sortByPlatform);
  };

  const onSortByPlatformDesc = () => {
    var sortByPlatform = state.listGames.sort((a, b) =>
      a.platform.localeCompare(b.platform)
    );
    setListGames(sortByPlatform.reverse());
  };
}

Feel free to ask if you have any more questions.

CodePudding user response：

Array.prototype.sort and Array.prototype.reverse both do in-place sorts and orderings. In other words, they mutate the array they operate over. If you are calling this on React state, it will mutate state, a major anti-pattern in React.

Assuming you've converted and stored the class-component this.state.listGames into a function component listGames useState React hook:

const [listGames, setListGames] = React.useState([]);

I suggest factoring the code a bit to create sorting and inverse sorting comparator functions:

const sortComparator = (a, b) => a.platform.localeCompare(b.platform);
const inverseSortComparator = (a, b) => sortComparator(b, a);

Use a functional state update to access the previous state, create a copy, then sort it using the comparator.

const onSortByPlatformAsc = () => {
  setListGames(listGames => listGames.slice().sort(sortComparator));
};

To do an inverted sort, again use a functional state update, create a copy, and then use an inverted sort comparator function to swap the sorting order.

const onSortByPlatformDesc = () => {
  setListGames(listGames => listGames.slice().sort(inverseSortComparator));
};