Ravenous Part 2: Passing Information

Congratulations on completing your project!

Compare your project to our solution code and share your project below! Your solution might not look exactly like ours, and that’s okay! The most important thing right now is to get your code working as it should (you can always refactor more later). There are multiple ways to complete these projects and you should exercise your creative abilities in doing so.

This is a safe space for you to ask questions about any sample solution code and share your work with others! Simply reply to this thread to get the conversation started. Feedback is a vital component in getting better with coding and all ability levels are welcome here, so don’t be shy!

About community guidelines: This is a supportive and kind community of people learning and developing their skills. All comments here are expected to keep to our community guidelines

How do I share my own solutions?

  • If you completed the project off-platform, you can upload your project to your own GitHub and share the public link on the relevant project topic.
  • If you completed the project in the Codecademy learning environment, click on “Tools” and use the create a gist button, and then share that link here.

Do I really need to get set up on GitHub?
Yes! Both of these sharing methods require you to get set up on GitHub, and trust us, it’s worth your time. Here’s why:

  1. Once you have your project in GitHub, you’ll be able to share proof of your work with potential employers, and link out to it on your CV.
  2. It’s a great opportunity to get your feet wet using a development tool that tech workers use on the job, every day.

Not sure how to get started? We’ve got you covered - read this article for the easiest way to get set up on GitHub .

Best practices for asking questions about the sample solution

  • Be specific! Reference exact line numbers and syntax so others are able to identify the area of the code you have questions about.

My Version so far titled TasteMate

In the sample solution, I do not understand how the Business.js component ties in with the rest of the code. I understand that it has the code for the styling of the instance of the business object when rendered, but do not understand how it is connected to the App component for example. Any explanation would be very helpful as I am trying to further understand props and how they pass info from component to component

This is the Business.js component

This is the App.js component

In your App.js file you are passing the array of object to business list. So what business list is receiving us the const Businesses.
From there in BusinessList.js you currently have an array of Business objects that you need to map through in order to be able to have access to all the elements within the object. Once you map you have created individual objects from the array.
Lastly you have the Business.js which is receiving an individual object from the array. Now each business has elements that you can access.
So to put it all together App.js → passes Array of Objects to BusinessList.js → map through Array → passes individual Object to Business.js → access elements of Object to display in Business.js

Thank you for the detailed explanation, It makes better sense now.
The way I understand it is that the passing of components as props is done in a top-down movement from parent to child. I will keep working more on this project to understand more. Thanks again.

this is my part of solution, I tried to mimic and Yes! it’s almost same…

This is my part #2


To be fair I did take some creative liberties.
What I don’t understand, why are we putting the businessData at the app level? Even better, if the SearchBar has all the buttons and forms, how are we going to pass that back up to App, to use the Rest API to get the business Data? Doesn’t props only flow down?

Here’s a preview.

1 Like

I have to admit I spend more time checking and trying out your solutions than the ones given after I’m done with my part since they have some really interesting code that is not used in this class, thanks for sharing them!

1 Like

Thx a lot for the compliment!
Let me share a bit, what I used.

Since you learned React component and you know to make your own component,
It’s easy to jump and start to use some Component Styling Elements libraries instead of using the default native html elements. instead of using

use instead of making a complicated business item with img, articles & aside use , you need a navbar , a drop down menu, a accordion or a carousel? a template is already included.

  • the best part is all component are already pre-loaded with CSS to make them look good out of the box.
    Supposedly it makes additional styling easier!! :slight_smile: (Note, I still added some CSS files for extra styling)

This is what I used:

alternatively you could use other styling library like material UI.

we learned to make and use previously a lot of cool java-script libraries,
learn which one does what, and if you need a cool functionality use it.
Split code by issues/functionality and decide if you want to implement it from scratch or re-euse something.

Good luck with your project.

1 Like