Made with: React
Update: As of May 9, 2020, the API I was using to fecth the stock info has gone out of business so the values you will get in the Demo are all null. The functionality of the app, though, remains correct. I will update as soon as I find another free API.
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.