DEV Community

loading...

Fetching Yelp API via Netlify Function with React.js [pt. 6]

Marcin Oleksiak
self-taught coding newbie, interested in frontend webdev
Updated on ・11 min read

Previous part covering steps 19-20 is right here.

In this part I will:

  • render fetched data using useState hook, map method and key prop
  • style UI with Sass using SCSS syntax
  • refactor some rendered data with ternary operator and length property

21. rendering fetched data

In step 17.1 (part 4) I successfully fetched data from Yelp API and returned it to browser console. It was businesses array with 20 objects in it. In this step, I wanna render it in HTML. In order to do that, instead of using log method, I will use useState hook.

21.1 useState hook

I was using useState hook in step 7 (part 2) already. Right now I need to use it again, but this time in Fetched component. I'll name it dataFromYelp and will assign an empty array to it.

~/src/comps/Fetched.jsx
Alt Text

Using setDataFromYelp function I will assign fetched data to dataFromYelp variable. For now, I will use [0] index position to assign just first object.

~/src/comps/Fetched.jsx
Alt Text

I run netlify dev --live command, enter some search criteria, e.g. pizza/Berlin and submit them. I can check dataFromYelp variable in React DevTools:

DevTools > Components > App > Fetched
Alt Text

So now I will do it again, but this time without [0] index position:

~/src/comps/Fetched.jsx
Alt Text

I run netlify dev --live command, enter some search criteria, e.g. pizza/Berlin and submit them. I can check dataFromYelp variable in React DevTools:

DevTools > Components > App > Fetched
Alt Text

Right now I have twenty pizzerias from Berlin in my dataFromYelp state and I'm almost ready to render them in HTML.

21.2 CSS reset

In step 4.2 (part 1) I created some style to illustrate how parent and child components are organized. I don't need it any more, so I can replace entire code in ~/src/App.scss file with this. This is so called CSS reset, used to normalize browser's default style settings and the best I found on the web is Eric Meyer's reset from 2011.

So right now I have no style but only a CSS reset and when I run netlify dev --live command, I can see that my website, to put it mildly, looks bad... But that's fine for now.

https://stoic-bartik-7b88ce-2fe390.netlify.live/
Alt Text

21.3 map()

I will use map method to iterate through dataFromYelp state, which is array with 20 objects in it (Yelp API's limitation is up to 20 records), and return a new array containing data I wanna render in HTML.

I can use React DevTools to decide which key-value pair I wanna render. So to begin with something, I will render name string.

DevTools > Components > App > Fetched
Alt Text

~/src/comps/Fetched.jsx
Alt Text

I run netlify dev --live command, enter pizza/Berlin search criteria and submit them:

https://stoic-bartik-7b88ce-2fe390.netlify.live/search?term=pizza&location=Berlin
Alt Text

I rendered 20 name string values from fetched data. There is only one hair in the soup: each rendered child needs a unique key:

DevTools > Console
Alt Text

21.4 key prop, UUID

The map method I used in previous step to iterate through dataFromYelp state, created a new businesses array and populated it with fetched elements. If I return this new array to browser console, like shown here...

~/src/comps/Fetched.jsx
Alt Text

...I will see this:

DevTools > Console
Alt Text

Every fetched element has key prop with null value assigned. This is what causes a warning in browser console. I found TWO ways to solve this problem: the FAST one, and the PROPER one.

👉 In the FAST way I simply fetched id value from Yelp API and assign it as a key prop to each newly fetched element:

~/src/comps/Fetched.jsx
Alt Text

The result of this action is presented below:

DevTools > Console
Alt Text

👉 In the PROPER way I will use uuid package which is a function that randomly is generating an unique, 4-bits ID. To use this package in my app, I need to install it with yarn add uuid command and use in my code as follows:

~/src/comps/Fetched.jsx
Alt Text

The result of this action is presented below:

DevTools > Console
Alt Text

22. SCSS

Right now my website looks so lame, because it is just plain HTML and that's the bummer. So in this step I will create some style for inputs fields, submit button and fetched data. I choose to give up using CSS frameworks, such as Bootstrap or Tailwind, because it's not a main subject of this tutorial. Furthermore, for learning purposes I prefer to code in plain SCSS.

22.1 CSS

CSS is closely related to HTML, so the best way to get started with both of these languages, is do the HTML/CSS course, like this one: HTML & CSS Crash Course Tutorial (started on 2019-07-09, includes 11 videos, combined recording time 6:29:55) by Shaun Pelling a.k.a. Net Ninja.

The one-stop-shop for the latest CSS technologies is probably CSS-Tricks website, launched and run by Chris Coyier. He is a great guy, positive, full of passion, just check him out. Two comprehensive guides available on CSS-Tricks, worth study everyday, are: A Complete Guide to Flexbox (published on 2013-04-08, updated on 2021-04-07) by Chris Coyier and A Complete Guide to Grid (published on 2016-11-06, updated on 2021-03-10) by Chris House.

22.2 Sass

Sass is a preprocessor style sheet language which compiles to CSS. It has two syntaxes: SCSS (stands for Sassy CSS) which is a superset of CSS and SASS (stands for Syntactically Awesome Style Sheets) which uses the indentation of lines to specify blocks, instead of brackets and semicolons, like SCSS does. There is a very good tutorial on YouTube, Sass Crash Course (published on 2020-02-28, recording duration 48:04) by Brad Traversy.

I prefer to use SCSS, it works like this: if I install sass package with npm install -g sass command on my macOS, and if I watch SCSS→CSS translation in the background with sass --watch style.scss:style.css command, I can do this:

~/style.scss
Alt Text

~/style.css
Alt Text

It is fast, handy (particularly variables, numeric operators and nesting) and fun. I will use SCSS through next steps.

22.3 HTML refactoring

Literally the last thing before I begin to work with SCSS: I need to clean up some code from step 4.1 (part 1). I was using it to have a good overview of child/parent components hierarchy but now I don't need it any more.

~/src/App.jsx
Alt Text

~/src/comps/Nav.jsx
Alt Text

~/src/comps/Inputs.jsx
Alt Text

~/src/comps/Fetched.jsx
Alt Text

I run netlify dev --live command to see the changes:

https://stoic-bartik-7b88ce-2fe390.netlify.live/
Alt Text

I enter pizza/Berlin search criteria and submit them:

https://stoic-bartik-7b88ce-2fe390.netlify.live/search?term=pizza&location=Berlin
Alt Text

22.4 styling Nav and Inputs components

The main focus of this tutorial is data fetching and rendering, not web design per se, so I don't want to spend too much time on styling and writing about it. That's why I'm gonna use a big chunk of SCSS code I wrote when I was builing my first demo, and paste it in App.scss file, right here:

~/src/App.scss
Alt Text

I run netlify dev --live command to see the changes:

https://stoic-bartik-7b88ce-2fe390.netlify.live/
Alt Text

I enter again search criteria, e.g. pizza/Berlin and submit them.

https://stoic-bartik-7b88ce-2fe390.netlify.live/search?term=pizza&location=Berlin
Alt Text

Link to the homepage, input fields, Search button are look much better, so now I can focus on improving appearance of rendered data.

22.5 styling Fetched component

In order to be better organized with my code, I will create style for fetched data in separate file:

touch src/comps/Fetched.scss

~/src/comps/Fetched.scss
Alt Text

I need to import Fetched.scss style into Fetched.jsx component:

~/src/comps/Fetched.jsx
Alt Text

I run netlify dev --live command, enter pizza/Berlin search and submit them:

https://stoic-bartik-7b88ce-2fe390.netlify.live/search?term=pizza&location=Berlin
Alt Text

So I rendered names of twenty fetched pizzerias from Berlin. The list looks a little bit better then ordinary HTML without any style. I the next steps I will render more data, e.g. address, categories, ratings and reviews count, even images.

23. rendering more data

The best way to figure out which data is available to fetch, is by sending GET request with query params to API from Postman app. I did it already in step 11.3 (part 3), I will do it again now, but this time I will highlight specific data I wanna render in addition to name:

Alt Text

23.1 rendering display_address

Alt Text

To render full address of each restaurant, I need to fetch location object first, and then subiterate display_address array:

~/src/comps/Fetched.jsx
Alt Text

Additionally, I apply an inline style to distinguish address from name and use <br> element to make rendered list more readable:

~/src/comps/Fetched.jsx
Alt Text

I run netlify dev --live command, enter pizza/Berlin search and submit them:

https://stoic-bartik-7b88ce-2fe390.netlify.live/search?term=pizza&location=Berlin
Alt Text

23.2 rendering title

Alt Text

To render all titles describing restaurant's specialities, I need to fetch categories array first, and then subiterate title keys:

~/src/comps/Fetched.jsx
Alt Text

I run netlify dev --live command, enter pizza/Berlin search and submit them:

https://stoic-bartik-7b88ce-2fe390.netlify.live/search?term=pizza&location=Berlin
Alt Text

After last render (step 23.2) I've noticed, that some restaurants have not one but several specialties, like Pizza Peppino:
Alt Text

In my HTML code I'm using full stop after each fetched and rendered title. As a result, I HAVE this:
Alt Text

What I WANT is a comma after each title except the last one, after which I want to keep full stop, like this:
Alt Text

To achieve this, I will use ternary operator and length property:

~/src/comps/Fetched.jsx
Alt Text

I run netlify dev --live command, enter pizza/Berlin search and submit them:

https://stoic-bartik-7b88ce-2fe390.netlify.live/search?term=pizza&location=Berlin

Alt Text

23.4 rendering rating and review_count

Alt Text

To render rating and review_count keys, I need to do this:

~/src/comps/Fetched.jsx
Alt Text

I run netlify dev --live command, enter pizza/Berlin search and submit them:

https://stoic-bartik-7b88ce-2fe390.netlify.live/search?term=pizza&location=Berlin
Alt Text

23.5 rendering rating and review_count – refactoring

After last render (step 23.4) I've noticed, that some restaurants have not several but one review, like Fresh Steinofen Pizza:

Alt Text

In my HTML code I'm using the plural form of the word review, after each fetched and rendered review_count. As a result, I have this:
Alt Text

If there is just one review, I want this:
Alt Text

To achieve this, I will use ternary operator again:

~/src/comps/Fetched.jsx
Alt Text

I run netlify dev --live command, enter pizza/Berlin search and submit them:

https://stoic-bartik-7b88ce-2fe390.netlify.live/search?term=pizza&location=Berlin
Alt Text

23.6 rendering image_url

Alt Text

To render all URLs to restaurant's images, I need to fetch image_url key:

~/src/comps/Fetched.jsx
Alt Text

Sizes and proportions of images available on Yelp API varies, so I need to unify them with this style:

~/src/comps/Fetched.scss
Alt Text

I run netlify dev --live command, enter pizza/Berlin search and submit them:

https://stoic-bartik-7b88ce-2fe390.netlify.live/search?term=pizza&location=Berlin
Alt Text

23.7 Code on GitHub, what's next?

Complete repo from this blog entry is uploaded on my GitHub.

Next part covering steps 24-26 is right here.

Thanks for reading and stay tuned!

Discussion (0)