6. State and Props

Activity 6.01: Creating a Products App Page

Solution:

1. Create the app's structure. By analyzing the data and its requirements, we can come up with the following structure for the app:

   App
     |-ProductListing
       |-Product
     |-Tags
       |-Tag

   The ProductListing component holds the Product component, which, in turn, renders the product information. The Tags component holds multiple Tag components. State exists at the App level in order to hold selected tag information and at the Product level to toggle description visibility.

2. Create the app in the command line using create-react-app with the name react-state-props and run the app in development mode:

   npx create-react-app react-state-props
   cd comment-app
   yarn start

3. In src/App.js, import the data from the JSON file and extract the objects from it:

   import React, { Component } from "react";
   // styles
   import "./App.css&quot...