The Container.js component holds several other components, toggles a components' display as per state changes, and passes down their props to the components after it receives them from App.js.
The Container.js component mainly renders dependent on the state.role and state.option state variables that are sent to it by App.js. state.role indicates the role of the user (Bank, Buyer merchant, Seller merchant) currently logged in to the application. state.option indicates the option selected by the user (View LC, Create LC, Settle LC).
Based on the option selected, the container renders and toggles between the following components:
- BuyerTabView.js
- BankTabCreate.js
- BankTabView.js
- SellerTabView.js
- SettlerTabSettle.js
- BankLogin.js
- LCView.js
As their names suggest, the first five components indicate the role and the option selected. So, for example, when the Bank selects Create LC, BankTabCreate.js is rendered.
The sixth component in the list, BankLogin.js, is the default component rendered when no role or option is selected. Thus, it is the login page and the landing page for our app.
The LCView.js component is a common component that gives the details of a single LC, and it gets rendered whenever the option selected is ViewSingleLC, whichever the role might be.
A list of props is passed on while rendering the components. These include the following:
- LCNew, an array that maps a list of all LCs that the user can view/settle.
- LC, a struct variable that stores the details of the LC to be displayed in the LCView component.
- createLC() and settleLC() methods, which are called by their respective components on clicking the Submit button.
- A set of session setters, including BuyerSessionView, BankSessionView, BankSessionCreate, SellerSessionSettle, and so on, which set the current role and option when invoked. Thus, they are passed to the components while rendering to enable navigation between the App components.
So, now, we have completed building our components. Let's bring it all together with our main App.js file.