How I build a reorder Array Object Methods fetching Swapi

I am building a Film grid that return their Id, thumbnail, title, episode number and released date.

How can I map reorderByDate() & reorderByEpisode() methods for return reorders values?

CodeSandbox Demo & Api Documentation Swapi

Films.js Component:

import React, { Component } from 'react';
import axios from 'axios';
import ListFilms from './ListFilms'

class Films extends Component {
  constructor(props) {
    super(props);

    this.state = {
      films: [],
    }

    this.getFilms = this.getFilms.bind(this)
  }

  getFilms() {
    return axios.get('https://swapi.co/api/films')
      ...
      })
  }

  reorderByDate = () => {
    let films = this.state.films.map(item => ({ ...item }));
    films.sort((a, b) =>
      a.release_date > b.release_date
        ? 1
        : b.release_date > a.release_date
        ? -1
        : 0
    );
    this.setState({ films });
  };

  reorderByEpisode = () => {
    let films = this.state.films.map(item => ({ ...item }));
    films.sort((a, b) =>
      a.episode_id > b.episode_id ? 1 : b.episode_id > a.episode_id ? -1 : 0
    );
    this.setState({ films });
  };

  componentWillMount(){
    this.getFilms();
  }
  render() {
    const { films } = this.state;
    return(
      <div className="container">
        <div className="d-flex justify-content-center align-items-center mb-2">
          <p className="mb-0 mr-2">Filter by:</p>
          <button onClick={this.reorderByDate} type="button" className="btn btn-warning btn-sm">Released Date</button>
          <p className="mb-0 mx-2">or:</p>
          <button onClick={this.reorderByEpisode} type="button" className="btn btn-warning btn-sm">Episode Number</button>
        </div>
        <ListFilms films={films} />
      </div>
    )
  }
};

export default Films;

please use the updated code from https://codesandbox.io/s/zn923169mx

reorderByDate = () => {
    let films = this.state.films;
    // let films = this.state.films;
    //console.log("from real",films[0].release_date);
    films = films.sort((a, b) => {
      let date1 = new Date(a.release_date).getTime();
      let date2 = new Date(b.release_date).getTime();
      console.log(date1);
      return date1 - date2;
    });
    this.setState({ films });
  };

  reorderByEpisode = () => {
    // console.log(...films.episode_id);
    let films = this.state.films;
    films = films.sort(function(a, b) {
      return a.episode_id - b.episode_id;
    });
    this.setState({ films });
  };

Reorder an Array according to given indices with repetition allowed; Maximum difference between first and last indexes of an element in array; Reorder an array such that sum of left half is not equal to sum of right half; Reorder the position of the words in alphabetical order; Minimum sum of two elements from two arrays such that indexes are


To solve the current scenario, you can use onClick() listeners on the buttons, and either use arrow operator or bind function to this

Inside the function, use Array.prototype.sort method to implement custom logic for sorting based on date or episode number

Refer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

You should use this.setState(prevState => nextState) functional syntax since you are trying to update films array from the exisiting state object to a sorted array and re-render

Extending the Array Object. Now, you may find that using a function to do this a bit weird as well. If you believe that a swap method needs to exist and be available for all arrays in your code, then you can actually extend the Array type with your own swap method:


Here is an example of sorting the movies by release_date.This is basic idea you can use it to sort on other basis. Add renderByDate() to Films and the button in Films container to to call the method

//add this button in your `Films` component
<button onClick={this.renderByDate}>Render By Date</button>

renderByDate = () => {
    let films = this.state.films;
    //console.log("from real",films[0].release_date);
    films = films.sort((a, b) => {
      let date1 = new Date(a.release_date).getTime()
      let date2 = new Date(b.release_date).getTime()
      console.log(date1);
      return date1 - date2;
    });
    this.setState({ films });
  };

Introduction to Array Methods in Java. The Arrays class that belongs to the java. The util package belongs to the Java Collection Framework. Array class gives methods that are static so as to create as well as access Java arrays dynamically. Arrays have got only static methods as well as methods of Object class.


0 Axios Multiple requests to return different object values Feb 4 '19 0 How could I resize/scale a geojson polygon Apr 18 '19 -1 How I build a reorder Array Object Methods fetching Swapi Feb 4 '19


Because an array in Windows PowerShell can contain different types, the Sort-Object method may be the preferred way of sorting objects. This is because in using the default comparer, the Sort static method fails when the array contains different types. In the following example, I create an array that contains both integers and strings.


Interchange axes and swap values axes appropriately. swaplevel (self[, i, j, axis]) Swap levels i and j in a MultiIndex on a particular axis. tail (self, n) Return the last n rows. take (self, indices[, axis]) Return the elements in the given positional indices along an axis. to_clipboard (self, excel, sep, …) Copy object to the system clipboard.