Components always start with a Capital Letter.
Create components that represent exactly one piece of your data model.

Step 1 - Define Hiearachy

Arrange components in a clear hierarchy.

Step 2 - Build Static UI

Build a version that takes your data model and renders a static UI (no interactivity).
The component at the top of the hierarchy will take your data model as a Prop.
Build components that reuse other components and pass data using Props.
Do not use State to build this static version

Step 3 - Understanding State

Add State to make your component interactive.
You need to be able to trigger changes to the underlying data model.
Identify all the different pieces of data in your components.
Work out which pieces of data are State.
If the data can be computed from a Prop or from another State then it is not State.

Step 4 - Identify Ownership

Perform the following for each piece of State in the component.
*) Identify every component that renders something based on the State
*) Find a common owner component
*) Either the common owner or another component higher up in the hierarchy should own the State.
*) If you cannot find a component where it makes sense to own the State, create a component just for holding the State and add it above the common owner component.

Step 5 - Add Inverse Data Flow

Add support for data flowing the other way.
The components at the bottom of the hierarchy might need to update the State in components higher up.
This data flow has to be explicit.
Components should only update their own State.

A component lower down needs to pass a callback to the component higher up that will fire whenever the State should be updated.
This can be done using an OnClick event on the component higher up that can notify the component lower down.
This callback will call SetState() to update the component higher up.

Consider creating an IsOfficeInitialised and then pass this property into top level react component

© 2023 Better Solutions Limited. All Rights Reserved. © 2023 Better Solutions Limited TopPrevNext