Using the font awsome sort icon which is cliked

Question

I am new to this. Here I am using the font-awsome sort icons .

<th scope="col">Technology<i className="fa fa-fw fa-sort sort-icon" onClick={(event) => props.sortAscending(event,'technology')}></i></th>

Now, Here I want to sort this data by asc or desc . Now, In this, using this way I am not able to get weather user has clicked the ascending or descending order.

So, I have checked for the event as well but no luck

Can any one help me with this ?

Answer 1

Let's assume your component is named SomeSortableTable , I'd suggest you edit it so that it looks like something like this :

class SomeSortableTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = { sortingASC: true, }
        this.sortData = this.sortData.bind(this);
    }

    sortData(event) {
         const {props, state} = this;

         if (this.state.sortingASC) {
             props.sortAscending(event, 'technology');
         }
         else {
             props.sortDescending(event, 'technology');
         }
         this.setState({sortingASC: !state.sortingASC});
    }

    render() {
        return 
            <th scope="col">Technology<i className="some-icon" onClick={(event) => this.sortData(event)}></i></th>
    }
}

The line this.setState({sortingASC: !state.sortingASC}); will toggle the sorting order and keep it in memory for later use.

You can then go further and add the class fa-flip-vertical to your icon accordingly.