HomePortfolio → Stock Info with ReactJS Router and Hooks


Stock Info with ReactJS Router and Hooks

January 27, 2020

Made with: React

Project Summary:

Web app to fetch stock info from an API and display it using React

Source Files | Live Demo


Objective

To build a stock info app using React.

What we wanted to accomplish

We wanted a simple form that let us input stock symbols. Upon submission, we wanted a page listing the names of those companies, hyperlinked to a specific company page where we could look at some financials.

Fig. 1: Input a few symbols and send the form:

Fig 2: List of companies whose symbols we submitted

Fig 3: Financials for each company

How we went about it

We used React to render our HTML pages. We used a third party API for the stock info. We used the fetch() method to get the info from the API. We then used React routes and hooks to render the pages dynamically, using the parameters in the search query.

What did we learn

We used URLSearchParams(window.location.search) to grab the query string parameter values.

We passed those values to our API endpoint using fetch()and then parsed the response with the json() method.

Once we received the info, we used React's new useState and useEffect functions to update our components and state. To make sure that the React components didn't render before the info from the API arrived, we used the async and await flags.

Both the list of company names and the individual stock pages are generated dynamically, using the parameters in the query string.

tech javascript


© 2020 MSC | Powered by