Cascading Form React Native Advanced

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

1. First approach is general, 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.

This is 3rd approach and we are going to deal with dynamic form fields.

Note, it will be easier to understand this post if you take a look at the previous 2 approaches.

First approach, Cascade Form Basic
Second approach, Cascade form improved

Lets' begin,

Contents

• Base Form
• Form fields object
• Dynamic field rendering
• Sample Data
• OnPage load
• Load Country
• OnChange
• Load State
• Load rest (City, Village, Street)
• Validation
• Reset Form

Base Form

This is static form page with 5 dropdown fields.

import React, { useState, useEffect } from "react";
import { ScrollView, View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { Dropdown } from "react-native-element-dropdown";
import { Snackbar } from "react-native-paper";

var snackMsg = "";
export default function App() {
  const [refreshPage, setRefreshPage] = useState(false);
  const [visible, setVisible] = useState(false);

  const onToggleSnackBar = () => setVisible(!visible);
  const onDismissSnackBar = () => setVisible(false);

  const resetForm = () => {
  };

  return (
    <ScrollView style={styles.container}>
      <View>
        <Text>Country</Text>
        <ZDropDown
          data={[]}
          labelField=""
          valueField=""
          value={null}
          isFocus={false}
          onChange={null}
        />
        <Text>State</Text>
        <ZDropDown . . ./>
        <Text>City</Text>
        <ZDropDown . . ./>
        <Text>Village</Text>
        <ZDropDown . . ./>
        <Text>Street</Text>
        <ZDropDown . . ./>
      </View>
      <View>
        <Text>Selected Country</Text>
        <Text style={styles.selectedValue}>
          {formFields.country.selectedItem.name}
        </Text>
        <Text>Selected State</Text>
        <Text style={styles.selectedValue}>
          {formFields.state.selectedItem.name}
        </Text>
        <Text>Selected City</Text>
       {. . .}
        <Text>Selected Village</Text>
        {. . .}
        <Text>Selected Street</Text>
        {. . .}
      </View>
      <TouchableOpacity onPress={() => resetForm()} style={styles.clrBtn}>
        <Text style={styles.clrBtnTxt}>Reset</Text>
      </TouchableOpacity>
      <Snackbar duration={2000} visible={visible} onDismiss={onDismissSnackBar}>
        {snackMsg}
      </Snackbar>
    </ScrollView>
  );
}

const ZDropDown = ({
 data, labelField, valueField, value, onFocus, onBlur, onChange, isFocus,
}) => {
  return (
    <Dropdown
      mode={"auto"}
      style={[styles.dropdown, isFocus ? { borderColor: "dodgerblue" } : {}]}
      placeholderStyle={styles.placeholderStyle}
      selectedTextStyle={styles.selectedTextStyle}
      inputSearchStyle={styles.inputSearchStyle}
      iconStyle={styles.iconStyle}
      search={data.length > 5}
      maxHeight={300}
      searchPlaceholder="Search..."
      data={data}
      labelField={labelField}
      valueField={valueField}
      placeholder={!isFocus ? "Select item" : "..."}
      value={value}
      onFocus={onFocus}
      onBlur={onBlur}
      onChange={onChange}
    />
  );
};

const styles = StyleSheet.create({
  // style props
});

refreshPage state variable is used to refresh the page in all the situations.

Now, These fields are going to be converted as dynamic.

Form Field Object

Previously we had 3 separate objects for 3 different fields, but here all fields data placed under one form field object.

 . . .
const formFields = {
  country: {
    fieldId: "country",
    label: "Country",
    labelField: "name",
    valueField: "countryId",
    parents: [],
    list: [],
    selectedItem: {},
    selectedValue: null,
    onValueSelected: () => null,
  },
  state: {
    fieldId: "state",label: "State",labelField: "name",valueField: "stateId",
    parents: ["country"],list: [],selectedItem: {},selectedValue: null,
    onValueSelected: () => null,
  },
  city: {
    fieldId: "city",label: "City",labelField: "name",valueField: "cityId",
    parents: ["country", "state"],list: [],selectedItem: {},
    selectedValue: null,onValueSelected: () => null,
  },
  village: {
    fieldId: "village",label: "Village",labelField: "name",
    valueField: "villageId",
    parents: ["country", "state", "city"],
    list: [],selectedItem: {},selectedValue: null,
    onValueSelected: () => null,
  },
  street: {
    fieldId: "street",label: "Street",labelField: "name",
    valueField: "streetId",
    parents: ["country", "state", "city", "village"],
    list: [],selectedItem: {},selectedValue: null,onValueSelected: () => null,
  },
};

 . . .
export default function App() {
   . . .
}

All these properties of a field have benefits, will be useful to handle dynamic rendering.

• fieldId ID of the field
• label Diaplay name of the field
• labelField denotes the dropdown label field in a dropdown list array
• valueField denotes the dropdown value field
• parents array of parent fields, will be used for validations
• list dropdown list array
• selectedItem whole selected item object of dropdown
• selectedValue selected value
• onValueSelected it is a function property, will be used/called when dropdown value selected/changed. Initially assigned as an empty method.

Dynamic Field rendering

By iterating the form field object keys we render dropdown fields dynamically, all the required properties are available in the form field object.

export default function App() {
  . . .
    return (
    <View style={styles.container}>
      <View>
      {Object.keys(formFields).map((ele, index) => {
          const fld = formFields[ele];
          return (
            <View key={"_formField_" + index}>
              <Text>{fld.label}</Text>
              <ZDropDown
                labelField={fld.labelField}
                valueField={fld.valueField}
                data={fld.list}
                value={fld.selectedValue}
                onChange={(item) => {}}
              />
            </View>
          );
        })}
      </View>
      . . .
    </View>
  );
}

handle focus / blur

var focusField = "";
export default function App() {
. . .

 const changeFocusField = (fld = "") => {
  focusField = fld;
  setRefreshPage(!refreshPage);
 };
. . .
}

<ZDropDown
. . .
  isFocus={focusField === ele}
  onFocus={() => {
    changeFocusField(ele);
  }}
  onBlur={() => changeFocusField("")}
  onChange={(item) => {}}
 />

Sample Data

Sample data for fields country, state, city, village and street .

const listCountry = [
  { countryId: "1", name: "india" },
  { countryId: "2", name: "uk" },
  { countryId: "3", name: "canada" },
  { countryId: "4", name: "us" },
];

const listSate = [
  { stateId: "1", countryId: "1", name: "state1_india" },
  { stateId: "4", countryId: "2", name: "state1_uk" },
  { stateId: "7", countryId: "3", name: "state1_canada" },
  { stateId: "10", countryId: "4", name: "state1_us" },
];

const listCity = [
  { cityId: "1", stateId: "1", countryId: "1", name: "city1_state1_country1" },
  { cityId: "5", stateId: "2", countryId: "1", name: "city5_state2_country1" },
  {
    cityId: "21",stateId: "7",countryId: "3",name:"city21_state7_country3",
  },
  {
    cityId: "26",stateId: "9",countryId: "3",name: "city26_state9_country3",
  },
];

const listVillage = [
  { cityId: "1", villageId: "1", name: "village 1  city 1" },
  { cityId: "2", villageId: "5", name: "village 5  city 2" },
  { cityId: "3", villageId: "9", name: "village 9  city 3" },
  { cityId: "4", villageId: "10", name: "village 10  city 4" },
];

const listStreet = [
  { villageId: "1", streetId: "1", name: "village 1 street 1" },
  { villageId: "1", streetId: "109", name: "village 1 street 109" },
  { villageId: "2", streetId: "2", name: "village 2 street 2" },
  { villageId: "2", streetId: "110", name: "village 2 street 110" },
];
 . . .
export default function App() {
  . . .
}
 . . .

OnPage Load

Firstly in the functionality side we have to setup some important things. Remember we assigned an empty method to the property onValueSelected, now it's time to assign the actual method. So we need to create 5 methods and assign them to the respective form field.

export default function App() {
  . . .
  const allValuesSelected = () => {
    console.log("All fields value selected");
  };

  const loadStreet = async () => {};

  const loadVillage = async () => {};

  const loadCity = async () => {};

  const loadState = async () => {};

  const loadCountry = async () => {};

  const loadPageData = () => {
    formFields.country.onValueSelected = loadState;
    formFields.state.onValueSelected = loadCity;
    formFields.city.onValueSelected = loadVillage;
    formFields.village.onValueSelected = loadStreet;
    formFields.street.onValueSelected = allValuesSelected;    
  };

  return (. . .);
}

When Country value selected, the STATE list has to be loaded, that's why here loadState method assigned to Country's onValueSelected. And likewise other methods assigned.

  useEffect(() => {
    loadPageData();
  }, []);

  return (. . .);

Load Country

load country list from sample data and call it on initial page load.

  const loadCountry = async () => {
    formFields.country.list = [...listCountry];
    setRefreshPage(!refreshPage);
  };

  const loadPageData = () => {
    formFields.country.onValueSelected = loadState;
    formFields.state.onValueSelected = loadCity;
    formFields.city.onValueSelected = loadVillage;
    formFields.village.onValueSelected = loadStreet;
    formFields.street.onValueSelected = allValuesSelected;

    loadCountry();
  };

OnChange

When dropdown field value selected, we need to setup the respective form field value, remove focus and load the next dropdown list.

return (
  . . .
  <ZDropDown
    // . . .
    onChange={(item) => {
      fld.selectedItem = item;
      fld.selectedValue = item[fld.valueField];
      focusField = "";
      fld.onValueSelected();
    }}
  />
  . . .
);

onValueSelected is useful right ?

Load State

When the first dropdown(country) changed, rest of the fields will be changed. So need to clear the list and data of all other form fields. For this we write a method which can clear the values from the given field to the end field.

const resetFields = (fld = "") => {
  var b = false;
  for (let kee in formFields) {
    if (b) {
      formFields[kee].list = [];
      formFields[kee].selectedItem = {};
      formFields[kee].selectedValue = null;
    } else {
      if (kee === fld) {
        b = true;
        formFields[kee] = {
          ...formFields[kee],list: [],selectedItem: {},selectedValue: null,
        };
      }
    }
  }
};

This method can be used for all other dropdown fields and page resetting purpose.

const loadState = async () => {
  resetFields("state");
  const arr = listSate.filter(
    (ele) => ele.countryId === formFields.country.selectedValue
  );
  if (arr.length) {
    formFields.state.list = arr;
  }
  setRefreshPage(!refreshPage);
};

State dropdown list is now perfectly loaded.

Load the rest (City, Village, Street)

As like before we load data for rest of the fields.

const loadCity = async () => {
  resetFields("city");
  const arr = listCity.filter(
    (ele) => ele.stateId === formFields.state.selectedValue
  );
  if (arr.length) formFields.city.list = arr;
  setRefreshPage(!refreshPage);
};

const loadVillage = async () => {
  resetFields("village");
  const arr = listVillage.filter(
    (ele) => ele.cityId === formFields.city.selectedValue
  );
  if (arr.length) formFields.village.list = arr;
  setRefreshPage(!refreshPage);
};

const loadStreet = async () => {
  resetFields("street");
  const arr = listStreet.filter(
    (ele) => ele.villageId === formFields.village.selectedValue
  );
  if (arr.length) formFields.street.list = arr;
  setRefreshPage(!refreshPage);
};

good, all the dropdowns populated with respective list.

Validation

Before showing the dropdown list we need to validate its parent field. So we are going to get the parent fields from the form field object. Then iterate them one by one, validate its value and show warning if necessary.

return (
  . . .
  <ZDropDown
    . . .
    onFocus={() => {
      changeFocusField(ele);
      const parents = fld.parents;
      for (let pr of parents) {
        if (!formFields[pr].selectedValue) {
          snackMsg = "Select " + formFields[pr].label;
          focusField = pr;
          onToggleSnackBar();
          break;
        }
      }
    }}
  />
  . . .
);

Reset Form

Finally, we provide option to reset the form fields.

 const resetForm = () => {
  resetFields("country");
  focusField = "";
  loadCountry();
};

All Done. Now we saw how to deal with dynamic form fields, rendering fields, loading data and validating them.

These are the 3 approaches of mine to handle cascading form fields.

Hope this post/series has some useful stuffs which you like. Thank you.

Full code here

Tags: #react #javascript #mobile #ios #android #reactnative #react-native #forms #dropdown #cascade #programming