-

Product List for {this.props.name}
   
{this.state.product1}
{this.state.product2}
{this.state.product3}
   
   
   );
   }
}
export default ProdosApp;
As you can see in the preceding code, we initialized a state with some values in the constructor of the React component. This React component is
stateful because it is using the state to carry the data to the child components. In the following code, we will see how to use this stateful React
component:
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ProdosApp from ‘./ProdosApp;
ReactDOM.render(, document.getElementById(content));
The following screenshot displays the output of the code:
Figure 8.11: A stateful React component
As you can see in the preceding screenshot, we rendered data using the state in the React components. Currently, we have used hardcoded data
in the constructor of this stateful React component. In the next chapter, we will fetch this data using the REST API.
We saw how to use the state with React components, now we will see how to use the state and props together with React components. In the
following example, we will see how to combine the props and state in your front-end React-based application:

---

import React from ‘react’;
class ProdosApp extends React.Component {
   constructor(props) {
   super(props);
   this.state = {
   product1: “Samsung A6 Plus”,
   product2: “iPhone X Plus”,
   product3: “Vivo V15 Pro”
   }
   }
   render() {
   return (