Solve 6 React Question

Example Question 1: Display Product Details by Parent-Child Communication John offers a shopping site. He wants his products to be displayed on the page. Each product has details such as product image, product name, product category and product price. And also an add to cart button. He wants to display the product name with the image as a list. When clicked on the product, particular product details must be displayed. This should be implemented by parent-child communication (props & state). Conditions : Create App component which is the base component for all other components. Create a parent component named 'ProductList' and a child component named 'Product'. Add ProductList component in the App Component. Create an object array named productsList as a state variable of the parent component 'ProductList'. Each object in the array should have an id, product name, product category, product price, and imageUrl in the state. Onclick of the product, the corresponding product details should be displayed in the child component. The selected product should be passed to the child component through props. <Product product={displayProduct} /> – The displayProduct should be an object of selected product Use the product id as a key for each list. refer images. Content : Use the product details given below. id: 1, name: 'Samsung Galaxy Note 10', category: 'Mobiles', country: 'Canada', price: 11500, currencyCode: 'CAD', productImage: require('./assets/img/[login to view URL]') id: 5, name: 'SkullCandy BT Inkd Plus', category: 'Bluetooth Headset', country: 'UK', price: 800, currencyCode: 'USD', productImage: require('./assets/img/[login to view URL]') id: 13, name: 'Anker Soundbuds Rise', category: 'Bluetooth Headset', country: 'Canada', price: 600, currencyCode: 'CAD', productImage: require('./assets/img/[login to view URL]') id: 8, name: 'JBL Flip 3 Bluetooth speaker', category: 'Speakers', country: 'India', price: 1400, currencyCode: 'INR', productImage: require('./assets/img/[login to view URL]',) id: 10, name: 'Conekt Volt Power Bank', category: 'Power Bank', country: 'China', price: 650, currencyCode: 'CNY', productImage: require('./assets/img/[login to view URL]',) id: 18, name: 'Apple Watch Series', category: 'Watch', country: 'China', price: 640, currencyCode: 'CNY', productImage: require('./assets/img/[login to view URL]',) id: 20, name: 'IBall Slide Spirit X2', category: 'Tablets', country: 'India', price: 9000, currencyCode: 'INR', productImage: require('./assets/img/[login to view URL]',) id: 22, name: 'Skullcandy Set 2.0 ', category: 'Headset', country: 'China', price: 900, currencyCode: 'CNY', productImage: require('./assets/img/[login to view URL]',) Note : Do follow the same structure [tagNames,ids,class] as given in the screenshot. Images are available in the assets/img folder inside src. Important note – Start working on the template code which is provided. Template code will provide the base template or format in which the end solution is expected from you. Template code is not an executable code and will only help you to add code on top of it to ensure your submissions are in the right format. If the submission is NOT as per the template code format, then the submissions will not be accepted.