DEV Community

loading...

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

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

Previous part covering steps 1-5 is right here.

In this part I will:

  • install React Developer Tools (as a browser extension and as a project dependency)
  • import and initialize useState hook
  • pass state as prop to child component
  • create basic HTML form
  • declare onChange and onClick events
  • enter searching criteria into input fields
  • submit entered data to child component's state

6. React Developer Tools

React DevTools extensions allows me to:

  • watch child/parent components hierarchy
  • monitor data flow through and between state and props

The basic idea behind it is well described in How to use the React Developer Tools tutorial by Flavio Copes. Recently I found an interactive tutorial containing fake ToDo app with React DevTools connected to it. In the next two subsections I'd like to describe two distinct ways of installing and using those tools.

6.1 React DevTools as a browser extension

The easiest and fastest way to start using those tools right away, is to install the extension in my browsers. Firefox Add-on can be downloaded from Mozilla Add-on website, same as Chrome Extension from Chrome Web Store.

In order to launch and use these tools, I need to run my app in development mode (I did it in step 2), then, in each of these two browsers, I can open (with my right mouse button) the context menu and choose “inspect”. Alternatively, I can choose in Firefox: Tools > Browser Tools > Web Developer Tools, or in Chrome: View > Developer > Inspect elements. I will work in Components tab.

6.2 React DevTools as a project dependency

This approach takes a few extra steps but gives me possibility to pull React DevTools beyond my browser window and keep it in separate GUI. It can be convenient, for example when I wanna keep Component and Console tabs visible simultaneously.

So instead of downloading Add-on or Extension, I can install react-devtools package in the root folder of my project:

yarn add -D react-devtools

-D option will install this package as a dev dependency

Then, I need to open index.html file and add one line of code:

~/public/index.html
Alt Text

Next step is to add a script to package.json file:

~/package.json
Alt Text

After restarting my development server with Ctrl + C shortcut and BROWSER=Any yarn start command, I reload my browser which is running at http://localhost:3000/. Then, I open a new tab in Terminal and run this command:

yarn devtools

From now on, I can inspect and watch my components, state and props in Electron framework.

7. State and Props (planning and coding)

I found two very good tutorials (and did them twice) about state and props, they are part of Learn React For Beginners series by Anthony Sistilli:

  1. useState & Basic Components Structure (published 2020-09-13, recording duration 25:03)
  2. Props, Destructuring, and Spreading (2020-09-20, 32:13)

The first two states that I want to initialize in App component, deal with entering data into a form fields, which don't exist yet (I'll create it in Inputs component) and with submitting entered data as prop to Fetched component. My idea works like this:

  1. I have two input fields and Search button:
    Alt Text

  2. I enter some searching criteria:
    Alt Text

Before I even hit Search button, I want to keep pizza/Berlin already in some state, let's call it entering. If I change my mind and replace Berlin with Boston, my entering state will change instantly, as I type.

  1. When I hit the Search button, data from entering state will be passed into another state, I will name it submitting, and entering state will be emptied in this very moment: Alt Text

7.1 Importing and initializing useState hook

There is a free and open source project called DevDocs, run and maintained by non-profit organization freeCodeCamp, and there is a pretty neat useState hook documentation: useState, Introducing Hooks, Using the State Hook,

~/src/App.jsx
Alt Text

entering and submitting are variables in which I can keep entered and submitted values

setEntering and setSubmitting are functions I can use to change values in the corresponding variables.

7.2 Passing State as a Prop to Child Component

Now I need to make decisions in which component, data from which state is needed.

In Inputs component I need entering variable for obvious reasons, duh. I also need setEntering function for instant changing of characters I'm entering (when replacing Berlin with Boston). And last but not least I need setSubmitting function to grab entered values after submit button is clicked.

I need to pass submitting variable with submitted values to Fetched component. Later I will use those values to fetch Yelp API.

So now, when I know what I want, I can do this:

~/src/App.jsx
Alt Text

In this section I was working with “imaginary” input fields and “fictitious” submit button. It was only a logic concept, if you will. In the next section I will build actual interface and will assign some events to it, to make state and props useful.

8. Forms and Events

In this section I will scaffold basic form, containing (as I planned) two input fields and submit button. After that I will add some events, to make my form at least a little bit useful.

8.1 basic HTML form

All I wanted to know about coding forms in React, I learned from those two tutorials: How to Build Basic Forms Using React Hooks (published 2020-08-17, 15 min read) by Chris Blakely and React Forms Tutorial: Access Input Values, Validate, Submit Forms (published 2020-11-10, 12 min read) by Dmitri Pavlutin. His whole blog (dmitripavlutin.com) is worth an every day reading!

To get started with form, I will code inside the return statement this code:

~/src/comps/Inputs.jsx
Alt Text

8.2 onChange and onClick Events

In this step I will:

  • import three props (as I planned in step 7.2) from App parent component to Input child component)

  • declare three event handlers: enteringFoodFx and enteringTownFx will capture what I will enter in input fields, submittingFx will set new values in submitting state

  • use two onChange and one onClick events to submit entered data and pass in to Fetched component

I mentioned Simo Edwin in section 4, here is another tutorial created by him: Build A Todo App With REACT | React Project For Beginners (published 2020-08-28, recording duration 1:33:52). Excerpt from 14:02 to 34:14 is exactly about what I wanna accomplish here.

  • as I type my searching criteria, each subsequent character entered into input field, must be added to entering state, immediately after every keystroke

  • when I will click Search button, entered characters must be submitted to submitting state

So here is my code:

~/src/comps/Inputs.jsx
Alt Text

9. State and Props in action

Now I can check in practice everything I prepared in steps 6, 7 and 8. First things first, I launch my app with BROWSER=Any yarn start command and open http://localhost:3000/ URL:

Alt Text

Before I type anything, I wanna take a look at each state and prop I declared (right mouse button > context menu > inspect).

DevTools > Components
Alt Text

DevTools > Components > App
Alt Text

DevTools > Components > App > Inputs
Alt Text

DevTools > Components > App > Fetched
Alt Text

9.1 entering data

Now it is time to enter some searching criteria, so I type pizza in food input field and Berlin in town input field. I do NOT click Search button yet.

Alt Text

Right now I keep my just entered data in App component's entering state and also in Inputs component's entering prop.

DevTools > Components > App
Alt Text

DevTools > Components > App > Inputs
Alt Text

Fetched component's submitting prop, same as App component's submitting state, is still empty

DevTools > Components > App > Fetched
Alt Text

9.2 submitting data

I can click Search button now.
Alt Text

And the result is this: App component's entering state got emptied and data from it was transfered into App component's submitting state.

DevTools > Components > App
Alt Text

Inputs component's entering prop got emptied too, I can see that in my browser: both input fields are empty again

DevTools > Components > App > Inputs
Alt Text

Entered data finally arrived in Fetched component's submitting state.
Now I can use this data to fetch API.

DevTools > Components > App > Fetched
Alt Text

9.3 Code on GitHub, what's next?

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

Next part covering steps 10-14 is right here.

Thanks for reading and stay tuned!

Discussion (0)

Forem Open with the Forem app