Let's start with writing the React component that represent the My Orders page. There are two components involved with the My Orders page:

• A single order card component
• A parent container component that hosts all the order card components

Let's begin with the single order card component. Here is how it looks:

Create a new file called orders.js inside the src folder. In there, we'll write our new components. At the top of the file, we need to import React:

import React from 'react';

For the single order card component, let's call it simply Order. This component will be simple. Since it will be contained within a parent container component, we can assume that all the order information is passed as props. Also, since we don't need to create any special methods, let's make it a functional component:

function Order(props){
    return (
        <div className="col-12">
            <div className="card text-center">
                <div className="card-header"><h5>{props.productname}</h5></div>
                <div className="card-body">
                    <div className="row">
                        <div className="mx-auto col-6">
                            <img src={props.img} alt={props.imgalt} className="img-thumbnail float-left" />
                        </div>
                        <div className="col-6">
                            <p className="card-text">{props.desc}</p>
                            <div className="mt-4">
                                Price: <strong>{props.price}</strong>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="card-footer text-muted">
                    Purchased {props.days} days ago
                </div>
            </div>
            <div className="mt-3" />
        </div>
    );   
}

As always, the Bootstrap framework makes styling our component a breeze.

Now let's move to the orders container parent component. This one will be a bit more complex because we need to store our orders in the state object of the component:

export default class OrderContainer extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            orders: []
        };
    }
}

The orders list needs to come from the backend part of our application. Because of that, the state object should change based on the interaction with the backend of our application. Let's not worry about that part for now because we'll have to cover it when designing the backend of our application in Chapter 6, RESTful Web APIs in Go with the Gin Framework. For now, let's jump into the render() method:

render(){
        return (
            <div className="row mt-5">
                {this.state.orders.map(order => <Order key={order.id} {...order} />)}
            </div>
        );
}

The preceding code is simple. We go through the orders in our state object, then load an Order component for each order object that we have. Remember here that when we are dealing with lists, we should use the key prop for the React framework to properly handle changes in the list, as mentioned in Chapter 4, Frontend with React.js. 

If you look at the GitHub code for this chapter, you'll notice that I actually fetch the orders data from a static file, in order to update the orders list in the state object. This is temporary, since I need some data to show how the visuals will look.