Chapter 6 Prop types

React Programming
1

Chapter 6 Discussion

2

Hi, just joined the forum. I’ve been working through the book the last few days, and I’ve really enjoyed it. I feel like I’ve learned a lot so far. Unfortunately, I’ve come up on my first road block, and I’ve tried several things to try and get through it, but it doesn’t look like any of them have worked.

I’ve gotten to where I install the ‘prop-types’ library, and I’ve updated the code in Thumbnail.js to import PropTypes and then add PropTypes to the Thumbnail component. However, my code continues to say that “prop-types should be listed in the project’s dependencies.” In my package.json file, it is indeed there in the dependencies, along with the package-lock file.

I’ve attached a screenshot of the code:

codescreenshot
codescreenshot1160×1325 82.6 KB

If there are any solutions to this, I’d appreciate it. It’s entirely possible I could have some of the code in the wrong place. Thanks!

1 Like
3

Hi, Thanks for reaching out.
ESLint/VSCode cache the list of installed dependencies, resulting in that error message showing up sometimes for recently installed dependencies.
Restarting the application, either in the terminal if you’re seeing errors in the browser and/or restarting VSCode, should help. (Note: you will likely see this sort of thing as you continue installing other new dependencies during the rest of the book.)
Let me know if that helps or if you’re still seeing the error after restarting.

1 Like
4

I was able to get past that after restarting VSCode, it was able to pick up the prop types. I reached the end of the chapter; I’ve updated the code to that point, but I’m not seeing the icons organized across as they appear in the book, they are still appearing vertically. Not sure if it has something to do with Chrome or something else.

Thanks for your help with my previous question!

5

They should display properly in any browser. Maybe double check the CSS files and the className(s) on your React components. You could also diff the files against the solution files for the chapter (which are in the resources.zip)

1 Like
6

I forgot the

{title}

in the Thumbnail.js file, which was why the names weren’t showing up under the icons. And in the home.css file, there was nothing about my code and the code from the answer file that was different except the indentation, but when I used the answer file, it made the icons display correctly. So that worked! Thanks!

8

Bronze Challenge: Add a Prop

As I’m working through the challenges, posting my solutions - any comments/suggestions welcome.
bronze

src/App.js

 function App() {
   return (
     <div>
-      <Header />
+      <Header title="Bronze Challenge: Add a Prop" />
       <Home items={items} />
     </div>
   );

src/components/Header.js

-function Header() {
+function Header({ title }) {
   return (
     <header className="header-component">
       <img src={CoffeeLogo} alt="coffee logo" />
-      <h1>Code Cafe</h1>
+      <h1>New Market</h1>
+      &nbsp;
+      <h2>{title}</h2>
     </header>
   );
 }

+Header.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+

Any hints as to prettier presentation especially appreciated.

9

Page 106, did anyone get the code to work like in Listing 6.8?

10

Welcome, could you be more specific about what is not working correctly for you?

11

Hi there!

Welcome to the forum! Glad to hear you’re enjoying the book. For the “prop-types” issue, make sure it’s correctly listed in your package.json dependencies. Run npm install or yarn install to ensure it’s installed, and check for typos. If the problem persists, the forum community can provide more targeted assistance.

Happy coding!