The Container.js file serves two main purposes:

• It renders components based on the current state of the app.
• It accepts the props from app.js and transfers them to the lower-level components.

Let's see how we will build the Container.js component:

1. Start by importing the three components for the app, Shoerack, Payment, and PVerification, as follows:

import React, { Component } from 'react';
import Shoerack from './Shoerack'
import Payment from './Payment'
import PVerification from './PVerification'

2. The render statement renders the Shoerack, Payment, and PVerification components based on the current state variables, as follows:

this.props.paymentf ?
 <div>
 <PVerification mAddress={this.props.mAddress}
 PaymentDetail={this.props.PaymentDetail} 
 amount={this.props.amount}
 diff={this.props.diff}
 closePayment={this.props.closePayment}
 minutes={this.props.minutes}
 seconds={this.props.seconds}
 />
 </div>:

3. When the paymentf flag is set, it indicates the customer is using a wallet other than MetaMask to make the payment. Setting this flag to true, it renders the PVerification page. The container component forwards the Payment Details parameter, the payment amount, and the minutes and seconds parameters for the timer.

4. If paymentf is set to false, the container component next checks whether the PaymentDetail props has name as a local property, as shown here:

this.props.PaymentDetail.hasOwnProperty('name') ?
 <div>
 <Payment PaymentDetail={this.props.PaymentDetail}
 Conv={this.props.Conv}
 mAddress={this.props.mAddress}
 closePayment={this.props.closePayment}
 MMaskTransfer={this.props.MMaskTransfer}
 PaymentWait={this.props.PaymentWait}
 startTimer={this.props.startTimer}
 minutes={this.props.minutes}
 seconds={this.props.seconds}
 />
 </div>:

5. If the name property exists and paymentf is false, the Container component renders the Payment component. It also forwards the following state variables as props:

• The Conv state variable: Live conversion rate from USD into Ether
• The mAddress variable: Dynamically generated merchant wallet address
• MMaskTransfer: The method for initiating a transfer from the MetaMask wallet
• PaymentWait: The method for accepting a transfer when a customer pays using a wallet other than MetaMask
• startTimer: The method to start a timer interval 
• minutes and seconds: Dynamic parameters for the timer

6. If none of the state variables are set, the container then renders the Shoerack component, which displays all of the shoes:

<div>
 <Shoerack shoes={this.props.shoes}
 newPayment={this.props.newPayment}
 />
 </div>

That ends Container.js. Now, let's bring it all together by declaring the methods that will define and modify our state in the App.js file.