cascading dropdown in edit mode

[iamhaaamed]

i have created a cascading dropdown in react js and it's working fine in create mode, but in edit mode the second dropdown is not the selected item. it seems that setValue is called before the second dropdown has fetch their options and so setValue is not working:

import React, { useEffect, useState } from "react";
import * as Yup from "yup";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import axios from "axios";

const baseURL = "https://bazar-online-backend.herokuapp.com/v1/";

export default function App() {
  const [provinces, setProvinces] = useState([]);
  const [cities, setCities] = useState([]);

  // form validation rules
  const validationSchema = Yup.object().shape({
    province: Yup.string(),
    city: Yup.string()
  });

  const { watch, register, setValue } = useForm({
    resolver: yupResolver(validationSchema)
  });

  useEffect(() => {
    async function fetchProvincesData() {
      try {
        const response = await axios.get(baseURL + "/provinces?limit=50");

        if (response.data.results) {
          setProvinces(response.data.results);
        } else {
          alert("error");
        }
      } catch (error) {}
    }

    fetchProvincesData();
  }, []);

  useEffect(() => {
    async function fetchData() {
      const province = watch("province");
      try {
        if (province === "please select an item") {
          return;
        }

        const response = await axios.get(
          baseURL + "/cities?limit=50&province=" + province
        );

        if (response.data.results) {
          setCities(response.data.results);
        } else {
          alert("error");
        }
      } catch (error) {}
    }
    fetchData();
  }, [watch, watch("province")]);

  useEffect(() => {
    async function fetchData() {
      try {
        const data = {
          province: "6094fa8e2088041d50640c69",
          city: "6094fa8e2088041d50640cde",
          id: "60957a9de0c34b00203c2b4b"
        };

        if (data) {
          const fields = ["province", "city"];

          fields.forEach((field) => {
            setValue(field, data[field]);
          });
        } else {
          alert("error");
        }
      } catch (error) {
        console.log(error);
        alert(error?.message);
      }
    }
    fetchData();
  }, [watch, setValue]);

  return (
    <div>
      <form>

        <select {...register("province")}>
          <option>please select an item</option>
          {provinces?.map(({ id, name }) => (
            <option value={id}>{name}</option>
          ))}
        </select>

        <select {...register("city")}>
          <option>please select an item</option>
          {cities?.map(({ id, name }) => (
            <option value={id}>{name}</option>
          ))}
        </select>

      </form>
    </div>
  );
}

[leapful]

@iamhaaamed Please provide a codesandbox to get more detail about the issue.

[leapful]

@iamhaaamed What is the steps to re-produce the issue ? If possible, please also list the current behavior and expected behavior.

[iamhaaamed]

it is expected that in this edit form the selected province, city are selected on page load, but they are not...

[leapful]

@iamhaaamed

The selected value ("city" and "province") from remote data should be set by using attribute "value" of element "select" as default value.

Working sample: https://codesandbox.io/s/stupefied-currying-9ruj6?file=/src/App.js

[iamhaaamed]

it's working but in this way I can not change the city anymore...

[leapful]

@iamhaaamed

Your current implementation using "useEffect" to load city data based on selected province is incorrect. Watch data for "province" and "city" (using useWatch) must be executed only one before "useEffect", not inside it.

The updated CSB sample in my previous comment will fix the issue.

Updated CSB sample: https://codesandbox.io/s/stupefied-currying-9ruj6?file=/src/App.js

[leapful]

Final solution of the issue (for better reading by other people that has the same issue): https://codesandbox.io/s/stupefied-currying-9ruj6?file=/src/App.js