Lodash to sort data in react

Question

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!

Dekel · Accepted Answer · 2017-08-19 21:42:37Z

1

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

edited Aug 19, 2017 at 21:42

answered Aug 19, 2017 at 21:33

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Andrew Li Over a year ago

Can't you just do event.start? Why the brackets?

Dekel Over a year ago

You can. I only took the original code by the OP :)

vanegeek Over a year ago

Thank you @Dekel I tried you solution and still no luck

vanegeek Over a year ago

@AndrewLi eliminated the brackets as suggested still doesn't work. i think the problem is in the data being an array of objects and me not being able to actually access the start property.

Dekel Over a year ago

@vanegeek - check the update in my answer. It looks like the correct way to access the start value is event.node.start and not node['start']

|

Collectives™ on Stack Overflow

Lodash to sort data in react

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related