CODEWITHSUNDEEP
javascriptjsonreactjslodash
vanegeek
vanegeek

Reputation: 713

Lodash to sort data in react

I am trying to order by events based on their date. I have a button that will render the events in ascending order and another button will render the events in descending order. I am using lodash's orderBy method. I am defining the orderDir in the state of my container component. The orderDir changes when the buttons get clicked. The orderBy should be the 'start' property of my data object. I believe I can get to access it. Here is my code:

import React, { Component } from 'react';
import logo from './logo.png';
import './App.css';
import EventCard from './EventCard';
import SampleData from './data/sample-data.json';
import _ from 'lodash';

let dataRaw = SampleData.data.eventSearch.edges;
let data= dataRaw;

class App extends Component {

  constructor(props) {

    super(props);
    this.state = {
      data: {data},
      defaultSortIndexes: [],
      orderDir:'desc'
    };

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

  sortEevent(e, type){

    if (type === 'asc'){
      this.setState({ orderDir:'asc'});
    }else{
      this.setState({ orderDir:'desc'});

    }
  }

  render() {

    let filteredEvents = this.state.data.data;
    let orderDir = this.state.orderDir;
    console.log(filteredEvents);
    filteredEvents = _.orderBy(filteredEvents, (event)=>{
      return event['start'];
    }, orderDir);//order by
    let events = filteredEvents.map((event, i) =>

    <EventCard
      key={i}
      name={event.node.title}
      image={event.node.painting.images[0].thumb_url}
      venue={event.node.venue.name}
      tickets={event.node.tickets_available}
      distance={event.distance}
      date={event.node.start}
      firstName={event.node.artist.first_name}
      lastName={event.node.artist.last_name} 
      artistImage={event.node.artist.images[0].thumb_url}
    />

  );//map

    console.log(this.state.data)
    return (
      <div className="App">

        <div className="header-wrapper">

          <div className="logo-header">

            <div className="logo-wrapper">

              <img src={logo} className="App-logo" alt="logo" />

            </div>

            <div className="menu-wrapper">

              <a>Events</a>

            </div>

          </div>

          <div className="filters-wrapper">

            <div className="filters">

              <p>Search Filters:</p>

              <button onClick={(e) => this.sortEevent(e, 'asc')} className="green">SORT ASCENDING</button>

              <button onClick={(e) => this.sortEevent(e, 'desc')}>SORT DESCENDING</button>

            </div>

          </div>

        </div>

        <div className="EventList">

          {events}

        </div>

      </div>
    );
  }
}

export default App;

I am console logging the filteredEvents, which is the object that I am trying to sort. Here you can see where the 'start' property is.

Thanks so much in advance! enter image description here

Upvotes: 3

Views: 2630

Answers (1)

Dekel
Dekel

Reputation: 62556

The value of the start element in your object is a string, and not a Date object, so the comparison will be done using strings comparison and not dates.

You can convert the strings to date using:

new Date(event.node.start)

here is the orderBy usage:

filteredEvents = _.orderBy(filteredEvents, (event)=>{
    return new Date(event.node.start);
}, orderDir);//order by

Upvotes: 1

Related Questions