Video-08-Build-Product-Screen #8

basir · 2020-09-22T08:43:40Z

No description provided.

YitshakS · 2021-09-26T01:28:32Z

frontend/src/screens/ProductScreen.js

+                numReviews={product.numReviews}
+              ></Rating>
+            </li>
+            <li>Pirce : ${product.price}</li>


"Pirce" should be "Price"

what do I need to change for this to work

Since react-router v5.1 with hooks:

import { useParams } from 'react-router';

And instead of
this.props.match.params.id
you should just use this hook like below:

const { id } = useParams();
const product = data.products.find((x) => x._id === id);

And as well in App.js you should wrap Route with Routes like this:

<Route path="/" element={} exact />
<Route path="/product/:id" element={} />

of course you need to import extra Routes from "react-router-dom"
He is using useParams later in a course anyway.

Hope this helps

I try your solution and it shows me this error. It looks like component didn't connect with data.js

TypeError: Cannot read properties of undefined (reading 'image')
15 |

16 |
| ^ 17 |

Hi,
Maybe your id is undefined and that's what makes const product undefined as well?
log id and see if contains any value.

useParams does take id from query string so it must be passed in address bar like this:
localhost:3000/api/product/3 where number 3 is and product id and it exists in data.js.

File ProductScreen should be added into Routes in App.js as well.

You should try and follow rest of tutorial as your code looks incomplete but I can not see it all so it is hard to say for sure.
Also looks like Route for ProductScreen is missing in App.js as well.

Hope it somehow helps

@iamjacek as you said I continued the course, I am now at the productScreen page using redux at /pull/13/files.
code is same, I get this error "
TypeError: Cannot read properties of undefined (reading 'params')" in productScreen file.
`

const dispatch = useDispatch();
24 | const productId = props.match.params.id;`

I also followed the steps you mention above, about this same error

This really helped .. thanks a ton.

Abhimanyu128 · 2021-11-08T12:14:57Z

frontend/src/App.js

-    </div>
+        </header>
+        <main>
+          <Route path="/product/:id" component={ProductScreen}></Route>


How would you write this line of code in v6 of react?

I have same problem . when start npm start a problem is (

Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . )

import {BrowserRouter, Routes, Route} from 'react-router-dom';
} > } >

import "routes" from react-router-dom and enclose route tag with routes tag

am getting the same error..kindly forward a demo code for error correction

It works but void of products

import {BrowserRouter, Routes, Route} from "react-router-dom"; <main> <Routes> <Route path="/product/:id" element={<ProductScreen/>}></Route> <Route path="/" element={<HomeScreen/>} exact></Route> </Routes> </main>

hope this helps

thanks alot

How can be get products on Homescreen

how to get product in screen

For those who are using React 18 & ReactRouter v6, this is the answer that took me a day to figure out

CatalinIrinel · 2021-11-20T10:15:45Z

Take out the this. from this.props. it should props.match, but if you are using react router dom v6 this will not work anymore You need to make it like this: const { id } = useParams() and use this const in the find function

…

On Sat, 20 Nov 2021 at 08:13, gmpithon ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In frontend/src/screens/ProductScreen.js <#8 (comment)>: > + <div className="row top"> + <div className="col-2"> + <img className="large" src={product.image} alt={product.name}></img> + </div> + <div className="col-1"> + <ul> + <li> + <h1>{product.name}</h1> + </li> + <li> + <Rating + rating={product.rating} + numReviews={product.numReviews} + ></Rating> + </li> + <li>Pirce : ${product.price}</li> [image: Capture] <https://user-images.githubusercontent.com/46791411/142716544-7b65b9df-17fb-4497-a852-e493a8fcefc9.PNG> what do I need to change for this to work — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#8 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANPKO4F2REY5I6TDP7WJMD3UM44AHANCNFSM4RVP2APQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

gmpithon · 2021-11-22T07:22:42Z

Thanks a lot const { id } = useParams(); const product = data.products.find((x) => x._id === id); This worked perfect

…

On Sat, Nov 20, 2021 at 11:05 PM Jacek ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In frontend/src/screens/ProductScreen.js <#8 (comment)>: > + <div className="row top"> + <div className="col-2"> + <img className="large" src={product.image} alt={product.name}></img> + </div> + <div className="col-1"> + <ul> + <li> + <h1>{product.name}</h1> + </li> + <li> + <Rating + rating={product.rating} + numReviews={product.numReviews} + ></Rating> + </li> + <li>Pirce : ${product.price}</li> Since react-router v5.1 with hooks: import { useParams } from 'react-router'; And instead of this.props.match.params.id you should just use this hook like below: const { id } = useParams(); const product = data.products.find((x) => x._id === id); And as well in App.js you should wrap Route with Routes like this: <Route path="/" element={} exact /> <Route path="/product/:id" element={} /> of course you need to import extra Routes from "react-router-dom" He is using useParams later in a course anyway. Hope this helps — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#8 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALE7V4YEOQRW6INYCICDCG3UM75QPANCNFSM4RVP2APQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

ghost

I believe this can help remove some frustration

ghost · 2021-12-23T06:34:20Z

frontend/src/screens/ProductScreen.js

+import data from '../data';
+
+export default function ProductScreen(props) {
+  const product = data.products.find((x) => x._id === props.match.params.id);


If anybody have a problem of "Product Not Found" please check this line:
const product = data.products.find((x) => Number(x._id) === Number(props.match.params.id));

This code works ))
const { id } = useParams();
const product = data.products.find((x) => x._id === Number(id));
Don't forget to
import { Link, useParams } from "react-router-dom";

This code works )) const { id } = useParams(); const product = data.products.find((x) => x._id === Number(id)); Don't forget to import { Link, useParams } from "react-router-dom";

please help _/_
still showing product not fount

find code below

import React from 'react';
import { Link, useParams } from "react-router-dom";
// import Rating from '../components/Rating';
import data from '../data';

export default function ProductScreen(props) {
const { id } = useParams();
const product = data.products.find((x) => x._id === Number(id));
if (!product) {
return
Product Not Found
;
}
return (

Product Found !

)
}

basir · 2022-09-15T08:35:43Z

Please ask this question here: https://codingwithbasir.com/questions/ask/ I answer it on daily basis.

…

On Sun, Aug 14, 2022 at 10:28 AM Sunil117798 ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In frontend/src/App.js <#8 (comment)>: > </div> - </div> - </main> - <footer className="row center">All right reserved</footer> - </div> + </header> + <main> + <Route path="/product/:id" component={ProductScreen}></Route> how to get product in screen — Reply to this email directly, view it on GitHub <#8 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AATUFQZHM3BGA5NI6GQ6KR3VZCDIFANCNFSM4RVP2APQ> . You are receiving this because you modified the open/close state.Message ID: ***@***.***>

Video-8-Build-Product-Screen

e75e357

basir merged commit 8457e79 into master Sep 22, 2020

basir changed the title ~~Video-8-Build-Product-Screen~~ Video-08-Build-Product-Screen Sep 22, 2020

YitshakS reviewed Sep 26, 2021

View reviewed changes

Abhimanyu128 reviewed Nov 8, 2021

View reviewed changes

ghost reviewed Dec 23, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Video-08-Build-Product-Screen #8

Video-08-Build-Product-Screen #8

basir commented Sep 22, 2020

YitshakS Sep 26, 2021

gmpithon Nov 20, 2021

iamjacek Nov 20, 2021

bilalmajeeduk Nov 28, 2021

bilalmajeeduk Nov 28, 2021

iamjacek Dec 3, 2021

bilalmajeeduk Dec 8, 2021

Arthurjoel12 Dec 9, 2021

Arthurjoel12 Dec 9, 2021

pcsaunak Jan 12, 2022

Abhimanyu128 Nov 8, 2021

samannamas Nov 14, 2021 •

edited

Loading

bilalmajeeduk Nov 28, 2021

GopinathMano Nov 29, 2021

Arthurjoel12 Dec 9, 2021

yxynicole Dec 29, 2021 •

edited

Loading

Alihaider402 Apr 7, 2022

manu07yad Apr 26, 2022

Sunil117798 Aug 14, 2022

entitinhat Nov 24, 2022

CatalinIrinel commented Nov 20, 2021 via email

gmpithon commented Nov 22, 2021 via email

ghost left a comment

ghost Dec 23, 2021

AlexMir346 Jan 12, 2022

vishalwatts Aug 11, 2022 •

edited

Loading

basir commented Sep 15, 2022 via email

Video-08-Build-Product-Screen #8

Video-08-Build-Product-Screen #8

Conversation

basir commented Sep 22, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samannamas Nov 14, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yxynicole Dec 29, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CatalinIrinel commented Nov 20, 2021 via email

gmpithon commented Nov 22, 2021 via email

ghost left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vishalwatts Aug 11, 2022 • edited Loading

Choose a reason for hiding this comment

basir commented Sep 15, 2022 via email

samannamas Nov 14, 2021 •

edited

Loading

yxynicole Dec 29, 2021 •

edited

Loading

vishalwatts Aug 11, 2022 •

edited

Loading