Stock Info Dashboards with ReactJS

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

Made with: React

Source Files | Live Demo

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.

© 2025 Mario Sanchez Carrion