Skip to main content
HashnodeUntitled Publication

Command Palette

Search for a command to run...

How do I build a dynamic dependent select form using react+redux, as we are receiving data from backend API?

Updated
•0 min read
S
Subho Karmakar

We are receiving the data from the backend API to load up the same in our select form.

There going to be multiple dynamic dependent select fields in the form. Once we select the value in the first field the second one loads up the data associated with the previous selection, this same sequence carries on for the next few steps.

APIs given like-

/address/state/india --> ALL STATES
/address/state/id/{id} --> STATES BY ID

/address/district/id/{id} --> DISTRICT BY ID
/address/district/state/{stateCode} --> DISTRICT BY STATE ID

/address/city/id/{id} --> CITY BY ID
/address/city/district/{districtId} --> CITY BY DISTRICT ID

As we can see that We can load up the state, now the districts are dependent upon the state id, and same for cities dependent upon district id.

How do I implement this? Please help me.

#reactjs#redux#forms#axios
99 views

Comments (1)

Join the discussion
O
Omprakash Sridharan6y ago

You can use javascript's compute property capabilities. Let's say you want to dynamically select the district based on the state. Construct a json describing your conditions.

[
  {
    "fieldName":"state",
    "dependentOn":null
  },
{
    "fieldName":"district",
    "dependentOn":"state" //this name should be same as that of mapStateToProps
  },
{
    "fieldName":"city",
    "dependentOn":"district"
  },
]

Iterate over the above to create react elements and for each you can access the values using selectors. ex:

const getDistrictsByState = (currentState) => {
  return (state)=>state[currentState] //computed at runtime
}

Hope this gives you some idea :)

1