Mastering Ethereum

Creating the Product component

Now that we have a basic design, we can create the product pages when the user clicks on the View button so that the user can see in detail more information about that particular piece. The user will be able to purchase products inside the product page. Let's go through the following steps:

1. Add a new Product.js file inside your components with the following code, although I always recommend you to try it yourself before seeing the solution:

import React from 'react'import Header from './Header'class Product extends React.Component {    constructor() { super() }    render() {        return (            <div>                <Header />                <div className="product-details">                    <img className="product-image" src={this.props.product.image} /> <div className="product-data"> ...