[FIXED] How to filter array based on selected item

Issue

I have an array of objects in an json file:

[
  {
    "department": "Sound Department",
    "subDepartments": [
      "Supervising Sound Editor",
      "Dialog Editor",
      "Sound Designer",
      "Foley Artis",
      "Sound Recordist"
    ]
  },
  {
    "department": "Camera Department",
    "subDepartments": [
      "Camera Operator",
      "Second Assistant Camera",
      "Other Assistant Camera",
      "Steadycam Operator",
      "Focus Puller"
    ]
  },
  {
    "department": "Production Department",
    "subDepartments": [
      "Camera Operator",
      "Second Assistant Camera",
      "Other Assistant Camera",
      "Steadycam Operator",
      "Focus Puller"
    ]
  }
]

From this i'm creating a dropdown menu of Departments. From that i would like to create another dropdown menu of sub-departments based on which department have been selected.

The dropdown menu of Departments is working fine, as well as storing that department in a state. I just can't figure out how to filter these.

import React, { useState } from "react";
import "./CreateJobPage3.css"

import Button from "../Input/Button";
import Select from "../Input/Select";
import departmentData from "../Data/departmentSheet.json";

const CreateJobPage3 = (props) => {
    const [department, setDepartment] = useState()
    const [subDepartment, setSubDepartment] = useState()

    const departments = departmentData.map((data) => data.department)

    const subDepartments = departmentData.filter(item => {
        return item.department === department;
      });

    const departmentHandler = (props) =>{
        setDepartment(props)
    }

    const subDepartmentHandler = (props) =>{
        setSubDepartment(props)
    }

  return (
    <>
      <div className="CJP3___inner">
          <Select
            placeholder="Choose Department"
            options={departments}
            value={department}
            onChangeOption={departmentHandler}
          />
          <Select
            placeholder="Choose Department"
            options={subDepartments}
            value={subDepartment}
            onChangeOption={subDepartmentHandler}
            isMulti={true}
          />
      </div>
      <Button className="isGrey formButton" text={"Add Function"} />
    </>
  );
};

export default CreateJobPage3;

Solution

So you already have filtering, what you are missing is getting subDepartments property out of the object, for that you could use map, but because your subDepartments is itself an array, I would use flatMap, otherwise result would be [['sub1,'sub2']]

      const subDepartments = departmentData.filter(item => {
        return item.department === department;
      }).flatMap(item => item.subDepartments);

Answered By - Nikita Chayka
Answer Checked By - - Katrina (ReactFix Volunteer)