CODEWITHSUNDEEP
javascriptarraysreactjsobjectfilter
Rigs
Rigs

Reputation: 183

Combining filter function with map

I have a component that uses a helper function to get a list of dates, then maps over them. In the data retrieved, there will not always be a date for a given phase, so I have added logic to return an empty string if that particular date is undefined.

The helper function gets a date where property Phase = 'phase name'.

I was able to extract part of this into a helper function, but feel there is still a much cleaner way to write this. Can someone please help?

Helper function

const getCoursePhaseDate = function(coursePhases, coursePhase) {
  return coursePhases.toJSON().filter((obj) => {
    return obj.phase === coursePhase;
  });
};

export default getCoursePhaseDate;

Component

import React from 'react';
import moment from 'moment';

// helpers
import getCoursePhaseDate from './helpers/getRehabStateDate';

const CourseInfo = ({ coursePhases }) => {

  const prep = getCoursePhaseDate(coursePhases, 'Prep')[0] && getCoursePhaseDate(coursePhases, 'Prep')[0].enteredOn || '';
  const intro = getCoursePhaseDate(coursePhases, 'Intro')[0] && getCoursePhaseDate(coursePhases, 'Intro')[0].enteredOn || '';
  const main = getCoursePhaseDate(coursePhases, 'Main')[0] && getCoursePhaseDate(coursePhases, 'Main')[0].enteredOn || '';
  const bonus = getCoursePhaseDate(coursePhases, 'Bonus')[0] && getCoursePhaseDate(coursePhases, 'Bonus')[0].enteredOn || '';

  const coursePhaseDates = [prep, intro, main, bonus];

  return (
    <div>
      <div>
        {
          coursePhaseDates.map((date, i) => {
            return (
              <span style={ styles.enteredOnDate } key={ i }>{ date }</span>
            );
          })
        }
      </div>
    </div>
  );
};

export default CourseInfo;

Upvotes: 0

Views: 506

Answers (3)

Jack Bashford
Jack Bashford

Reputation: 44087

If you want to make it cleaner and simpler, use arrow functions:

const getCoursePhaseDate = (coursePhases, coursePhase) => coursePhases.toJSON().filter((obj) => obj.phase === coursePhase));

And even cleaner with destructuring:

const getCoursePhaseDate = (coursePhases, coursePhase) => coursePhases.toJSON().filter(({ phase }) => phase === coursePhase));

Upvotes: 1

Mike
Mike

Reputation: 617

const hasOwn = {}.hasOwnProperty;

const getCoursePhaseDate = function(coursePhases, coursePhase) {
  const foundPhase = coursePhases.toJSON().find(obj => {
     return obj.phase === coursePhase && hasOwn.call(obj, 'enteredOn');
  });

  return foundPhase != null ? foundPhase.enteredOn : '';
};

export default getCoursePhaseDate;



import React from 'react';
import moment from 'moment';

// helpers
import getCoursePhaseDate from './helpers/getRehabStateDate';

const CourseInfo = ({ coursePhases }) => {
  const coursePhaseDates = ['Prep', 'Intro', 'Main', 'Bonus'].map(phase => {
     return getCoursePhaseDate(coursePhaseDates, phase);
  });

  return (
    <div>
      <div>
        {
          coursePhaseDates.map((date, i) => {
            return (
              <span style={ styles.enteredOnDate } key={ i }>{ date }</span>
            );
          })
        }
      </div>
    </div>
  );
};

export default CourseInfo;

Upvotes: 1

Leela Venkatesh K
Leela Venkatesh K

Reputation: 1710

This line and similar ones can be modified as below using destructuring and default parameters

const {enteredOn: prep = ''} = getCoursePhaseDate(coursePhases, 'Prep')[0] || {};

This reduces the invocation of functions twice as well.

Hope it helps :)

Upvotes: 1

Related Questions