How to sort data and display it in reactjs?

Question

I want to display projects in sorted manner when user clicks on sort by funds then it should display the projects in sorted by funds but my code is not working why so ? I am importing the sortBy() function and using it when user clicks on the button.

home.js:

import React, { Component } from 'react';
import Card from '../common/card';
import Projects from '../../data/projects';
import { sortBy } from './helper';

    export default class Home extends Component {

      constructor(props) {
        super(props);
        this.state = {
          projects: Projects
        }
      }

      render() {

        return (
          <div>
              <div className="header">
                <div className="buttonContainer">
                  <div>
                      <button className="btn btn-primary mycustom dropdown-toggle mr-4" type="button" data-toggle="dropdown" aria-haspopup="true"
                      aria-expanded="false">Sort by </button>

                      <div className="dropdown-menu">
                          <a className="dropdown-item" href="#" onClick={() => sortBy('funded')}>Percentage fund</a>
                          <a className="dropdown-item" href="#" onClick={() => sortBy('backers')}>Number of backers</a>
                      </div>
                  </div>
                </div>
              </div>
              <div class="container-fluid">
                <div class="row">
                  {this.state.projects.map( (val,index) => (
                    <div class="col-3">
                      <Card title={val.title} by={val.by} blurb={val.blurb} 
                      url={val.url} funded={val.funded} backers={val.backers} imgurl={index}/>
                    </div>
                  ))}
                </div>
              </div>
          </div>
        )
      }
    }

helper.js:

import projects from '../../data/projects';

export function sortBy (searchTerm) {
    if(searchTerm === 'funded'){
        return projects.sort((a,b) => a.funded - b.funded);
    }else if(searchTerm === 'backers'){
        return projects.sort((a,b) => a.backers - b.backers);
    }
}

projects.js:

http://jsfiddle.net/0z8xcf1o/

Importing data to set component-local state is unusual. Can you pass this data to the component either as a prop or in redux state? — jmargolisvt
– jmargolisvt, Commented Dec 27, 2018 at 6:01

ic3b3rg · Accepted Answer · 2018-12-27 06:05:05Z

2

In your render function, you should iterate over this.state.projects instead of Projects
You need to update your state on every sort
Your sortBy function can be simplified, it should set the state for you, and it would be better to add it to the component:

-

sortBy(searchTerm) {
  this.setState({ projects: [...Projects].sort((a, b) => a[searchTerm] - b[searchTerm]) });
}

and then call it with

onClick={() => this.sortBy('funded')}

answered Dec 27, 2018 at 6:05

ic3b3rg

15k4 gold badges33 silver badges55 bronze badges

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

3 Comments

fun joker Over a year ago

I was implementing the sort function in helpers.js and I was importing it in component. So instead of that should I implement it inside the component itself ? Can I implement it in another file also ?

ic3b3rg Over a year ago

you can implement it in another file, but then you need to pass the component into it, i.e. sortBy(component, searchTerm) { component.setState( ... ); }

ic3b3rg Over a year ago

btw, if your goal is to reuse logic across components, look into HOCs

Collectives™ on Stack Overflow

How to sort data and display it in reactjs?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related