Lukket

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.

Evner: React.js, Redux.js, JavaScript

Om klienten:
( 0 bedømmelser ) Aurangabad, India

Projekt ID: #33947033

9 freelancere byder i gennemsnit ₹8767 timen for dette job

(17 bedømmelser)
3.5
skythefreelancer

Hi there, I’m really interested to work on your project . I have 5 years of experience in the field and have successfully delivered numerous projects . I have a team of expert developers and designers. Please respond Flere

₹60000 INR in 7 dage
(3 bedømmelser)
2.0
(1 bedømmelse)
1.5
yeshwanthm235

Hi there, I would love take this project. I am very good at reactjs and I hope you accept my proposal. Thank you Your's respectively Yeshwanth M

₹1050 INR in 5 dage
(0 bedømmelser)
0.0
TakyAllah

give me the source code that i will work on it, message me and I'll do it immediately, These tasks won't take more than 3 hours

₹1500 INR in 7 dage
(0 bedømmelser)
0.0
technoprimex

I am a Professional Web and php Developer. I am also want to assure you that I am ready to make any consideration about my given bid rate if needed. Other detail discuss in call and text me it is very simple i do in Flere

₹1500 INR in 4 dage
(0 bedømmelser)
0.0
akshaytejus02

HI there! I have the experience of developing websites and webapps using React JS for clients, in the past. I am well aware of props and state of React and also with the Redux. Going through your requirements, I believ Flere

₹8000 INR in 10 dage
(0 bedømmelser)
0.0
rajivchaulagain

Dear Sir , I have read your question and the status you provided can be finished if you choose me as I can create it right now. I am a front end developer currently working on a company as developer. I am very active Flere

₹1050 INR in 7 dage
(0 bedømmelser)
0.0
gowtham30112

Hi, I have completed this project according to the description you hav given. I can present it to you as soon as i get selected. Thank You.

₹800 INR in 7 dage
(0 bedømmelser)
0.0