General React Component Help

[LTR14]

Source: (Any branch) PPUC/frontend/src/components/[any filename].jsx

Description: In React, it is sometimes crucial to share data between components. This is done throughout the codebase often currently and will most likely continue to happen to a greater extent as the site develops further. The current ACPP website is built using class-based components which changes the way a lot of things are done. "Lifting the state up" is an important technique in sharing data and it can be accomplished manually or in using the ContextAPI for class based components.

All components form a tree and within that tree there are several parents and one parent at the top of the tree that is a parent to all components. To share a variable from one component to another, you must pass this variable up the tree to at least the most recent shared ancestor. The state must be redefined here as well as functions that act on it and then passed down as props parameters to the components you want this state to be shared to that are children of the parent. This process is known as lifting the state and passing props down and is a common flow in React.

In the ACPP codebase, app.jsx is the root component from which all components are built from and is the place where you will lift states to if you want to share them to unrelated components. You can see this process already in Researchers.jsx to ResearcherResult.jsx and ResearcherResultSentence.jsx classes with the result variable in Researchers. This flow works because Researchers is the parent which creates the other two components.

Additional Notes/Resources: https://www.geeksforgeeks.org/lifting-state-up-in-reactjs/

https://legacy.reactjs.org/docs/context.html