Solve 6 React Question
Budget: ₹600 – ₹1,500 INR
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/product1.jpg')
id: 5, name: 'SkullCandy BT Inkd Plus', category: 'Bluetooth Headset', country: 'UK', price: 800, currencyCode: 'USD', productImage: require('./assets/img/product2.jpg')
id: 13, name: 'Anker Soundbuds Rise', category: 'Bluetooth Headset', country: 'Canada', price: 600, currencyCode: 'CAD', productImage: require('./assets/img/product3.jpg')
id: 8, name: 'JBL Flip 3 Bluetooth speaker', category: 'Speakers', country: 'India', price: 1400, currencyCode: 'INR', productImage: require('./assets/img/product4.jpg',)
id: 10, name: 'Conekt Volt Power Bank', category: 'Power Bank', country: 'China', price: 650, currencyCode: 'CNY', productImage: require('./assets/img/product5.jpg',)
id: 18, name: 'Apple Watch Series', category: 'Watch', country: 'China', price: 640, currencyCode: 'CNY', productImage: require('./assets/img/product6.jpg',)
id: 20, name: 'IBall Slide Spirit X2', category: 'Tablets', country: 'India', price: 9000, currencyCode: 'INR', productImage: require('./assets/img/product7.jpg',)
id: 22, name: 'Skullcandy Set 2.0 ', category: 'Headset', country: 'China', price: 900, currencyCode: 'CNY', productImage: require('./assets/img/product8.jpg',)
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.
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/product1.jpg')
id: 5, name: 'SkullCandy BT Inkd Plus', category: 'Bluetooth Headset', country: 'UK', price: 800, currencyCode: 'USD', productImage: require('./assets/img/product2.jpg')
id: 13, name: 'Anker Soundbuds Rise', category: 'Bluetooth Headset', country: 'Canada', price: 600, currencyCode: 'CAD', productImage: require('./assets/img/product3.jpg')
id: 8, name: 'JBL Flip 3 Bluetooth speaker', category: 'Speakers', country: 'India', price: 1400, currencyCode: 'INR', productImage: require('./assets/img/product4.jpg',)
id: 10, name: 'Conekt Volt Power Bank', category: 'Power Bank', country: 'China', price: 650, currencyCode: 'CNY', productImage: require('./assets/img/product5.jpg',)
id: 18, name: 'Apple Watch Series', category: 'Watch', country: 'China', price: 640, currencyCode: 'CNY', productImage: require('./assets/img/product6.jpg',)
id: 20, name: 'IBall Slide Spirit X2', category: 'Tablets', country: 'India', price: 9000, currencyCode: 'INR', productImage: require('./assets/img/product7.jpg',)
id: 22, name: 'Skullcandy Set 2.0 ', category: 'Headset', country: 'China', price: 900, currencyCode: 'CNY', productImage: require('./assets/img/product8.jpg',)
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.