Sorting Products in React

 

1. setState() - Callback Function

• The 
  setState()
   is asynchronous, it takes an optional callback parameter that can be used to make updates after the state is changed.

Syntax

1

this.setState({property1: value1,...}, callbackFunction)

JSX

2. React Icons

• react-icons
  is a third-party package contains bundle of icons like bootstrap, font awesome, material icons etc..,

• Check react-icons website here .

2.1 Installing React Icons

• This below command installs all the react-icons library in your React project.

1

npm install react-icons

2.2 Searching React Icons

• Click on the Icon to copy the Icon Name.

2.3 Importing React Icons

• The First letters of the icon indicates the category of the Icon.

• Each category of Icons have import statements separately, go to the category and copy the import statement.

Example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

import { BsFilterRight } from "react-icons/bs";

import { FaFacebookF } from "react-icons/fa";

import { MdDelete } from "react-icons/md";

const ReactIcon = (props) => {

return (

<div>

<BsFilterRight />

<FaFacebookF />

<MdDelete />

</div>

);

};

export default ReactIcon;

JSX

Collapse

3. Sorting Products