-

Product List for {this.props.name}
   
   
   
   
   
   
   );
   }
}
class Product1 extends React.Component {
render() {
   return (
   
   
{this.props.product1Prop}

---

   
   );
   }
}
class Product2 extends React.Component {
render() {
   return (
   
   
{this.props.product2Prop}
   
   );
   }
}
class Product3 extends React.Component {
   render() {
   return (
   
   
{this.props.product3Prop}
   
   );
   }
}
export default ProdosApp;
In the preceding code, we combined props and state with the React component s in a React-based front-end application. We set the state in our
parent component and passed it down the component tree using props. Inside the render function, we set product1Prop, product2Prop, and
product3Prop used in child components.
Creating Header and Footer components to the Prodos front-end application
In this section, we will provide more shape to our PRODOS front-end application. We will add the header and footer to our front-end application.
We will create a header React component for our React application as shown in the following code snippet:
import React, { Component } from ‘react’;
import logo from ‘./logo.jpg’;
import ‘./App.css’;

---

class ProdosHeader extends Component {
render() {
   return (