Using one dropdown show the options in another dropdown from database collection in reactjs

See more:

MongoDB

Node.js

ReactJS

I have two dropdowns, machineType and machineProblem.

I want to get machine problems using machineType selected in the Dropdown, I have an API for getting data from the database collection named machinetypeproblems.

I want to show all the machineProblems that belong to the machineType that is selected in drop down. I have tried something but I didn't get the results I wanted and I am having problems when I select the machineType from the Dropdown, the page becomes a blank white page.

Here is the code that I have tried:

API in the backend:

What I have tried:

router.get("/problemtype-by-machinetype", async (req, res) => {
  try {
    const machineType = req.query.machineType; // Get the selected machine type from the query parameters
    console.log(machineType, "machine type :");
    // Query the problem types based on the selected machine type
    const data = await ProblemType.find({ machineType });
    //data.reverse();
    console.log("sahil :" ,data);
    res.json({
      statusCode: 200,
      data: data,
      message: "Read Problem Types by Machine Type",
    });
  } catch (error) {
    res.json({
      statusCode: 500,
      message: error.message,
    });
  }
});

Here is the front end:

//   auto form fill up in edit
  let seletedEditData = async (datas) => {
    setModalShowForPopupForm(true);
    setId(datas._id);
    setEditData(datas);
  };
  const [selectedMachineType, setSelectedMachineType] = useState([]);

// Update the "Machine Type" dropdown's onChange handler
const handleMachineTypeChange = (event) => {
  setSelectedMachineType(event.target.value);
};

  // machine type
  let [macineTypeData, setMachineTypeData] = useState([]);
  let getmacineTypData = async () => {
    let response = await axios.get(
      "http://localhost:5000/machinetype/machine-type"
    );
    setMachineTypeData(response?.data?.data);
  };
  // Problem type
  let [problemTypeData, setProblemTypeData] = useState([]);
  let getProblemTypData = async () => {
    try {
      const response = await axios.get(
        "http://localhost:5000/machinetype/problemtype-by-machinetype",
        {
          params: { machineType: selectedMachineType }, // Pass the selected machine type
        }
      );
      setProblemTypeData(response?.data?.data);
      console.log("response data : ", response?.data?.data)
    } catch (error) {
      console.error(error);
    }
  };

  React.useEffect(() => {
    getmacineTypData();
    getProblemTypData();
  }, [selectedMachineType]);

//return function

                  <div className="w-100 mt-3">
                    <TextField
                      fullWidth
                      size="small"
                      select
                      label="Select City"
                      name="engineerCity"
                      value={values.engineerCity}
                      onBlur={handleBlur}
                      onChange={handleChange}
                    >
                      <MenuItem>Select City</MenuItem>
                      <MenuItem 
                      value="Bhavnagar">Bhavnagar</MenuItem>
                      <MenuItem value="Surat">Surat</MenuItem>
                    </TextField>
                    {touched.engineerCity && errors.engineerCity ? (
                      <div className="text-danger"> 
                       {errors.engineerCity}</div>
                    ) : null}
                  </div>
                  <div className="w-100 mt-3">
                    <FormControl fullWidth>
                      <InputLabel size="small">Machine 
                      Type</InputLabel>
                      <Select
                        multiple
                        size="small"
                        name="machineType"
                        value={selectedMachineType}
                        onChange={handleMachineTypeChange}
                        input={<OutlinedInput label="Machine Type" />}
                        renderValue={(selected) => selected.join(", ")}
                        onBlur={handleBlur}
                        MenuProps={MenuProps}
                      >
                        {macineTypeData?.map(({ machineType }) => (
                          <MenuItem key={machineType} 
                           value={machineType}>
                            <Checkbox
                              checked={
                                selectedMachineType.indexOf(machineType) > -1
                              }
                            />
                            <ListItemText primary={machineType} />
                          </MenuItem>
                        ))}
                      </Select>
                    </FormControl>
                    {touched?.machineType && errors?.machineType ? (
                      <div className="text-danger"> 
                       {errors?.machineType}</div>
                    ) : null}
                  </div>

                  <div className="w-100 mt-3">
                    <FormControl fullWidth>
                      <InputLabel size="small"
                          >Machine Problem</InputLabel>
                      <Select
                        multiple
                        size="small"
                        name="machineProblem"
                        value={values.machineProblems}
                        onChange={handleChange}
                        input={<OutlinedInput label="Machine Problem" />}
                        renderValue={(selected) => selected.join(", ")}
                        onBlur={handleBlur}
                        MenuProps={MenuProps}
                      >
                        {problemTypeData?.map(({ machineProblems }) => (
                          <MenuItem key={machineProblems} 
                          value={machineProblems}>
                            {console.log("machine problem :", machineProblems)}
                            <Checkbox
                              checked={
                                Array.isArray(values.machineProblems) && 
                       values.machineProblem.indexOf(machineProblems) > -1
                              }
                            />
                            <ListItemText primary={machineProblems} />
                          </MenuItem>
                        ))}
                      </Select>
                    </FormControl>
                    {touched.machineProblem && errors.machineProblem ? (
                      <div className="text-danger"> 
                              {errors.machineProblem}</div>
                    ) : null}
                  </div>

Here is the model for database collection:

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const machineTypeProblems = new Schema({
  machineProblems: { type: Array },
  machineType: { type: Array },
  createAt: { type: String },
  upadateAt: { type: String },
});

module.exports = mongoose.model("machinetypeproblems", machineTypeProblems);

I want to show machineProblem in the dropdown for the machine problems.

Here is the data in JSON format in database collection:

{
  "_id": {
    "$oid": "651ea9684467845cbda8385d"
  },
  "machineProblems": [
    {
      "id": 1,
      "machineProblem": " program does not open / પ્રોગ્રામ ખૂલતો નથી "
    },
    {
      "id": 2,
      "machineProblem": "Earthing check / અર્થિંગ ચેક "
    }
  ],
  "machineType": [
    "OFFICE WORK"
  ],
  "__v": 1
}