How to toggle on Order in ReactJS

Question

I am doing sorting in asc and desc . I want to make logic if User click first time I want to update it with name asc , when User click second time I want to update it with name desc . It will repeat same manner when ever user click.

Code

        class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

Answer 1

You can toggle based on what you have in the state.

getSortedData = () => {
  this.setState({
    sortedData: this.state.sortedData === "name asc" ? "name desc" : "name asc"
  }, () => {
    this.getData();
  });
};

So this one will work on the following way:

 sortedData = "name asc"; console.log(sortedData); setInterval(function () { sortedData = sortedData === "name asc" ? "name desc" : "name asc"; console.log(sortedData); }, 500);

Answer 2

This is a good question. I think you can do something like that.

 class App extends React.Component { state = { names: ['Ane', 'Robert', 'Jane'], asc: true, }; toggleOrder = () => { this.setState({ names: this.state.asc ? this.state.names.sort() : this.state.names.reverse(), asc: !this.state.asc, }); } render() { const { names, asc } = this.state; return ( <div> <button onClick={this.toggleOrder} > { asc ? 'des' : 'asc' } </button> <ul> { names.map(name => ( <li>{name}</li> )) } </ul> </div> ); } } ReactDOM.render( <App />, document.querySelector('#app') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>

Answer 3

define order in your component state and initialize it with true.

 constructor(props){ super(props); this.state={ order: true, sortedData: '' } } getSortedData =() => { if (this.state.order) { this.setState({order: false, sortedData: 'name desc' }, () => { this.getData(); }); } else { this.setState({order: true, sortedData: 'name asc' }, () => { this.getData(); }); } }

Answer 4

Here is sort toggle function sample code with functional component:

const [sortable, setSortable] = useState(true);

function handleSort() {
  setSortable(!sortable);
  const sortedData = [...filteredData].sort((a: any, b: any) => {
     return sortable ? (a.title > b.title ? 1 : -1) : (a.title > b.title ? -1 : 1);
  })
  setFilteredData(sortedData);
}

return <button onClick={handleSort}>Sort</button>