Build a Stock Market App with React

Stock Market API and ReactJS together? <3

This is a very basic application to the world of REST APIs. I strongly feel you will get the basic hang of using REST APIs after going through this blog.

I'm using for building this app.

Here's a peek into the final output of this application: Alt Text

Aight! Let's get into cooooddiiinngg.


Let us first visualize what we are going to build exactly? Alt Text

Setting up the JSX

          <h2>Stock Calculator</h2>

Hurray! Our header is set. Ok, let me bring down my excitement and let's get our hand's dirty now.

Let us make the rest of the JSX elements now.

         placeholder="Stock Name"
         onInput={(event) => setStock(}

          placeholder="Purchased Price"
          onInput={(event) => setPurchasedPrice(}

          placeholder="Quantity Purchased"
          onInput={(event) => setQuantityPurchased(}

        <button onClick={clickHandler}

        <p id="output"> 

Now you'll probably land up with tons of error messages, as we didn't import { useState } and we didn't initialize the useState for the respected variables.

So let us do that? :D

  const [stock, setStock] = useState("");
  const [purchasedPrice, setPurchasedPrice] = useState("");
  const [quantityPurchased, setQuantityPurchased] = useState("");
  const [output, setOutput] = useState("");

Integrating with the API

The API that we use for the purpose of this blog is from There is no specific reason for choosing this particular API, this was the one that I found first and it was easy enough for me to integrate it! :D

Getting the API key/Token from finnhub --> Get Free API key --> Copy the API key

Once that is done, you can proceed to --> Documentation --> Stock Price --> Quote

You can refer to the documentation, if you have any doubts. Anyways enough talk, let's get to coding! :)

  const url = "";

  function stockURL(stock) {
    let name = stock.toUpperCase();
    return url + "symbol=" + name + "&token=c07um4f48v6uu9ck9l4g";

We defined the URL of the API, then created a function that returns to a URL with the name of the stock that we want, along with the token key.

Now let's get into the Fetch Call.

// clickHandler() is the function that gets called when we press the Submit button

function clickHandler() {
    // Point 1
      //Point 2
      .then((response) => response.json())
      //Point 3
      .then((event) => {
        let currentPrice = event.c;
        //Point 4
        let totalPastPrice = parseInt(purchasedPrice) * parseInt(quantityPurchased);
        let totalCurrentPrice = parseInt(currentPrice) * parseInt(quantityPurchased);

        let balance = totalCurrentPrice - totalPastPrice;

        // Point 5
        if (balance > 0) {
        let percentage = (
            (parseInt(quantityPurchased) / parseInt(purchasedPrice)) *
            `You made a profit of ${percentage} which amounts to $ ${balance} `

       else if (balance < 0) {
          var percentage = (
            (parseInt(purchasedPrice) / parseInt(quantityPurchased)) *
            `You made a loss of ${percentage}% which amounts to $${-balance} `

     else setOutput("You made neither a profit nor a loss.");

      //Point 6
      .catch((event) => alert("There is something wrong with the server"));}
  1. The fetch calls a function stockURL, with an argument of "stock". The value of "stock" is received from the user through the input box. The stockURL function then returns a URL consisting of the name of the stock and the token key.

  2. Now, we tell the fetch call to transform all the data from the returned URL into json format.

  3. From the given json format, we take the data of "c" alone as it indicated to the "current price" of the stock. You can return other values as well. (Refer documentation for other values)

  4. We calculate the totalPastPrice, totalCurrentPrice based on the input received from the user (setPurchasedPrice & setQuantityPurchased has already been done when the user types in the input box). Then the balance is calculated.

  5. If the balance is positive ie. the user has made a profit. We find the percentage. The parseInt is used for converting the string to a number, and toFixed(2) is used for rounding & limiting the number of decimal digits to 2. Now the setOutput ie. Display to the output box. Similar process occurs for balance negative and zero.

  6. If there's any issue with the server or the server is over-loaded, an alert box shows up to the user indicating the same.

Hurrayyy! That's it.

Now, you can add in the CSS and style it as you like. Maybe even add so that the user can select the stock from the list.

Click Here for the link to the live demo.

Disclaimer: I am a complete newbie into the web dev world, so if I haven't practiced the best-practices - do let me know & I'll be more than glad to correct myself. :D

I document my journey and experiences on Twitter and LinkedIn.

Victoria Lo's photo

Nice one! Welcome to the web dev world! Looking forward to see you grow :)

P.S. I can't seem to open the link to the live demo.

Show +1 replies
Victoria Lo's photo

Mohammad Shabeer works now, good job! I recommend adding error handling to the button if you want to strengthen the code a little. Like when user inputs a negative price value or when user inputs non-numeric values.

And maybe showing the user the current price of the stock? I can see that it is logged in the console instead of in the app itself. But it's just a minor suggestion. Overall, nice work! :)

Mohammad S's photo

Victoria Lo Thank you so much, for your inputs. I have been trying to get a hang around on the best-practices and on creating a process for building any application. Like on what context and what all to think upon (eg: like the error handling part you suggested).

Will def work on these! :)

Smile Gupta's photo

Amazing work Mohammad Shabeer