Let's look at the constructor method of our App.js file and the preliminary state it initializes, as follows:

1. The constructor starts by instantiating the LCMaster and LCabi components we defined earlier, like this:

class App extends Component {
 
 constructor(){
 super();
 
 this.LCMaster = LCMaster;
 this.LCabi = LCabi;

2. Next, it sets the app name (GreenGables Bank) and binds our methods so that they can be accessed from the child components, as follows:

this.appName = 'GreenGables Bank';
this.closeTab = this.closeTab.bind(this);
this.resetApp = this.resetApp.bind(this);
this.viewLC = this.viewLC.bind(this);
this.viewSingleLC = this.viewSingleLC.bind(this);
this.onInputChangeUpdateField = this.onInputChangeUpdateField.bind(this);

3. Lastly, it declares and defines our default state when the app is loading for the first time. Notice how the role and the option variables are set to null. It also declares a set of fields, including BuyerAccount, SellerAccount, Amount, DOExpiry, DocHash, and LCNo, which will be used by the child components to take inputs from the user. It also declares the LCNew array, which will store the dynamic list of LCs that will be used for further processing. The LC object will be used to store information when the user wants to view the details of a single LC:

this.state = {
 role: null,
 option: null,
 LCNew: [],
 LC: [],
 fields: {
 BuyerAccount: null,
 SellerAccount: null,
 Amount: null,
 DOExpiry: null,
 DocHash: null,
 LCNo: null
 },
 };