Tracking The Flow of Information in React.js
Published: 2021-08-15 22:55:31

 A major advantage of React is that it facilitates the overall process of writing components which can then in turn be reused. It can become challenging to track the flow of information from one component to another, especially when one wants to keep track of the props. Having a flow chart to be used as an available reference would allow a person to easily view the progression of information among the components. In this example, an actual React project will be utilized.

One would start in the parent component (which many times is App.js) and look at the components that are rendered within it. These components probably have props which are included to pass down. Here is an example:

src/componentsApp.js
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44iifwul4n905hctv3jv.png)

Login, Signup, and Medications are rendered.  We therefore start with the following connections:
App  → Login

App → Signup

App  → Medications

src/components/Login.js 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8si9rlhprebnieln3oev.png)

LoginForm is rendered. The flow chart is updated to the following.

App  → Login → LoginForm(End)

App → Signup

App  → Medications

LoginForm is opened and looking at the code reveals that it does not have any children so that line is complete. Any component without children are not shown in this post. We now go to Signup. When there are no children, (End) is entered to clarify that no component was left out of that progression.

src/components/Signup.js 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fk3omrnkiuk01crfepru.png)

SignupForm is rendered and therefore added to the list.
 
App  → Login → LoginForm(End)

App → Signup → SignupForm(End)

App  → Medications

SignupForm does not have any children so that line is complete. We now go to back to Medications. For the remainder of this posting, the logic will be continued. A progression will be followed and when a new progression is advanced, that will be an indication that the previous progression's last component had no children. If a branching occurs, every component up to that branching will be repeated. 

src/components/Medications.js
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/by9j14pvz6kqmuepar6y.png)

App  → Login → LoginForm(End)

App → Signup → SignupForm(End)

App  → Medications → MedicationList

App  → Medications → CreateMedication

src/lists/MedicationList.js
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33dunl3p65klgthy6n89.png)

App  → Login → LoginForm(End)

App → Signup → SignupForm(End)

App  → Medications → MedicationList → Medication(End)

App  → Medications → MedicationList → ComplicationList

App  → Medications → CreateMedication

src/lists/ComplicationList.js
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vwzztkm33mgxirvcmuz.png)

App  → Login → LoginForm(End)

App → Signup → SignupForm(End)

App  → Medications → MedicationList → Medication(End)

App  → Medications → MedicationList → ComplicationList → Complication

App  → Medications → MedicationList → ComplicationList → CreateComplication

App  → Medications → CreateMedication

src/components/Complication.js
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4j2qghnms2hiupjlj95o.png)

App  → Login → LoginForm(End)

App → Signup → SignupForm(End)

App  → Medications → MedicationList → Medication(End)

App  → Medications → MedicationList → ComplicationList → Complication → EditComplicationForm(End)

App  → Medications → MedicationList → ComplicationList → CreateComplication 

App  → Medications → CreateMedication

src/components/CreateComplication.js
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk0ew9hbjqln2a3b6o1v.png)

App  → Login → LoginForm(End)

App → Signup → SignupForm(End)

App  → Medications → MedicationList → Medication(End)

App  → Medications → MedicationList → ComplicationList → Complication → EditComplicationForm(End)

App  → Medications → MedicationList → ComplicationList → CreateComplication  → ComplicationForm(End)

App  → Medications → CreateMedication

src/components/CreateMedication.js
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xto97gvo3veh62g45a44.png)
 
 App  → Login → LoginForm(End)

App → Signup → SignupForm(End)

App  → Medications → MedicationList → Medication(End)

App  → Medications → MedicationList → ComplicationList → Complication → EditComplicationForm(End)

App  → Medications → MedicationList → ComplicationList → CreateComplication  → ComplicationForm(End)

App  → Medications → CreateMedication → MedicationForm(End)

There is now a complete list of the progression of information which can be referenced during the building or usage of React.js programming.