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/

Answer 1

1. In your render function, you should iterate over this.state.projects instead of Projects
2. You need to update your state on every sort
3. 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')}