codeforboston / codeforboston/cliff-effects
Clarity in expressing how React keeps track of information input in the forms (updating client)
- Dominant language
- JavaScript
- Stars
- 30
- Forks
- 62
- PR merge metrics
- No merged PRs in 30d
Description
I had some trouble when first reading the code answering the question: When someone changes a value on the "Income" page, how does React keep track of that information?
As I went through the code to answer this question, I had some trouble following some of the functions and props. I think this was in part because some functions/props don't seem to be consistently named across different component levels. I also think some of my confusion might be remedied through better documentation. (Since I am relatively new to React, some of it may be my learning curve.)
The proposed action item: Refactoring to make it more clear how the variables in the "client" state are set.
---
For reference, here's the process I used to understand the code base better:
I used React Dev Tools to identify the relevant prop, and then searched the code base to find out where it came from. I then started at VisitPage and traced the props down. Some lines were still confusing to me, such as:
setTimeProp = getTimeSetter(__)
(in CurrentIncomeStep)
sharedProps and baseProps especially when used with the spread operator -- trying to figure out exactly what was being sent where.
This is the rough path I followed to try and understand where the values were being kept track of:
utils/CLIENT_DEFAULTS
containers/VisitPage imports CLIENT_DEFAULTS and then sets a variable called clone inside the constructor of the VisitPage component
this.state contains "client" which is set equal to clone
"Step" refers to each tab on the input form
The FormSection component gets "client" passed to it as a prop
--> it appears to be defined within the getCurrentStep() function, taking this.steps[step].form
this.steps contains:
CurrentBenefitsStep
HouseholdStep
CurrentIncomeStep
CurrentExpensesStep
PredictionsStep
CurrentIncomeStep (inside CurrentIncome.js):
setTimeProp = getTimeSetter(__)
setTimeProp passed down to IncomeForm as setClientProperty
IncomeForm is also defined in CurrentIncome.js
setClientProperty calls ensureFuture to propagate values to future properties
CashFlowRow gets ...sharedProps from setClientProperty, including setClientProperty (defined as the ensureFuture function)
CashFlowRow is defined in formHelpers.js
It defines a prop "store: updateClient" where updateClient is a function that calls the setClientProperty prop passed into it
ManagedNumberField gets ...baseProps from CashFlowRow which includes store()
ManagedNumberField contains a Form.Input and passes down to it the props onChange, onFocus, onBlur = this.handleChange, this.handleFocus, this.handleBlur
Form.Input is from the module semantic-ui-react
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.