Stock Info with ReactJS Router and Hooks
January 27, 2020
Made with: React
Web app to fetch stock info from an API and display it using React
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
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
Once we received the info, we used React's new
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
Both the list of company names and the individual stock pages are generated dynamically, using the parameters in the query string.