Cascading form React Native Improved

I want to share my 3 approaches of handling cascading form fields.

1. First one is general common approach, using state variables.


2. Second is to use ordinary variables and one boolean state variable to trigger the state effect (refresh page).


3. Third is, dynamic form fields with ordinary variables.

for drop down fields

Base Page

We are half way done now.

Load State STATE

On country selected, we need to load the respective states STATES based on the country selection.

Update country field, focus off country and load STATES based on country.

  <Text>Country</Text>

  <ZDropDown

    . . .

    onChange={(item) => {

      country.selectedCountry = item;

      country.selectedValue = item.countryId;

      focusField = '';

      loadState();

    }}

  />

Did you see the difference in the first approach? Previously there were 3 state variables updated but here only one state variable gets updated.

When country changed, both states and cities will be changed. So before setting up the new value we need to clear the existing data.

 const loadState = async () => {

   state = { list: [], selectedState: {}, selectedValue: null };

   city = { list: [], selectedCity: {}, selectedValue: null };

   const arr = listSate.filter(

     (ele) => ele.countryId === country.selectedValue

   );

   if (arr.length) {

     state.list = arr;

   }

   refreshPage(!refreshPage);

 };

All set, the form fields are working properly now.

Done.

Thank you.

Full code reference here