Organizing Filter Options in JavaScript for React Applications

Introduction:
In React applications, it is common to have filter options to refine data or provide user selection capabilities. In this blog post, we will explore three utility functions - organizeCounselorFilterOption, organizeCourseFilterOption, and organizeSourceFilterOption - that help organize and structure the filter options for counselor, course, and source selection.

src
organizeCounselorFilterOption:
The organizeCounselorFilterOption function takes in an array of counselor data and transforms it into an array of objects with label and value properties. Each object represents a counselor and provides the counselor's name (label) and ID (value). This structured format is suitable for popular React UI components like dropdowns or select inputs.

export const organizeCounselorFilterOption = (data) => {
    return data.map((item) => ({ label: item.name, value: item.id }));
};

organizeCourseFilterOption:
The organizeCourseFilterOption function takes in an array of course data and processes it to create an array of objects representing courses with their specializations. It handles scenarios where a course may have multiple specializations. The resulting array, allCoursesWithSpecializations, contains objects with label and value properties. The label combines the course name and specialization, while the value holds the course ID and specialization name (if available). This structure enables displaying courses with their specializations in dropdowns or select inputs.

export const organizeCourseFilterOption = (data) => {
    const allCoursesWithSpecializations = [];
    data.forEach((course) => {
        // ...
    });
    return allCoursesWithSpecializations;
};

organizeSourceFilterOption:
The organizeSourceFilterOption function takes in an array of source data and converts it into an array of objects with label and value properties. Each object represents a source item and provides the source name for both label and value. This transformation is useful for creating options in dropdowns or select inputs where users can choose the source.

export const organizeSourceFilterOption = (data) => {
    const listOfSource = [];
    data?.forEach((item) => {
        if (item) {
            listOfSource.push({ label: item, value: item });
        }
    });
    return listOfSource;
};

Conclusion:
In this blog post, we explored three utility functions - organizeCounselorFilterOption, organizeCourseFilterOption, and organizeSourceFilterOption - that help organize filter options for counselor, course, and source selection in React applications. These functions allow data to be transformed into structured formats suitable for various UI components, making it easier to implement filter functionality and provide a better user experience.

Note: The code snippets provided in the blog are written in JavaScript and can be used in React projects to organize filter options efficiently.