codeforboston / codeforboston/cliff-effects

Clarity in expressing how React keeps track of information input in the forms (updating client)

Open
#585 5 comments 0 reactions 1 assignee Claimed by @knod View on GitHub
discussion needed infrastructure ongoing
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.