title: How to implement Finnhub.io stock API into a React App
body: <p>I am new to web development and I am having trouble in a project I am creating. The end goal of this app is to make a stock reference app where the user can look up information about different stocks. It would end up being similar to the &quot;Stocks&quot; app on iOS devices. However, at this point I am still struggling to make this app work because I can't seem to figure out the API call. I managed to get the data that I wanted to get, however it doesn't work exactly how I wanted to.
  The first issue with my code is that it takes two clicks of the submit button to actually get the data and then set the state to match the data. The second issue is that the once the data is received and is displayed by the StockItem component, the stockPrice state will go back to zero after a couple of seconds.</p>
  <p>Here is my App.js</p>
  <pre><code>import './App.css';
  import StockItem from &quot;./StockItem&quot;
  
  class App extends React.Component {
    constructor (props) {
      super(props)
      this.state = {
        symbol: &quot;&quot;,
        stockPrice: 0,
        value: &quot;&quot;,
        stockName: &quot;&quot;,
      }
      this.handleChange = this.handleChange.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this);
    }
    
    handleChange (event) {
      this.setState({
        value: event.target.value
      })
      console.log(this.state.value)
    }
    
  
    handleSubmit(event) {
      this.setState({
        symbol: this.state.value
      })
      const finnhub = require('finnhub');
      const api_key = finnhub.ApiClient.instance.authentications['api_key'];
      api_key.apiKey = &quot;API Key&quot;
      const finnhubClient = new finnhub.DefaultApi()
      
      finnhubClient.quote(this.state.symbol, (error, data, response) =&gt; {
        this.setState({stockPrice: (data.c)})
      });
      finnhubClient.companyProfile2({'symbol': this.state.symbol}, (error, data, response) =&gt; {
        this.setState({stockName: (data.name)})
        console.log(data.name)
      });
      console.log(&quot;update was called&quot;)
      console.log(this.state.stockPrice)
      event.preventDefault();
    }
  
   
    render () {
      return (
        &lt;div&gt;
              &lt;form onSubmit={this.handleSubmit}&gt;
                  &lt;label&gt;
                    Stock Symbol:
                    &lt;input type = &quot;text&quot; value={this.state.value} onChange={this.handleChange} /&gt;
                  &lt;/label&gt;
                &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; /&gt;
              &lt;/form&gt;
              &lt;div&gt;
                &lt;StockItem symbol = {this.state.symbol} price = {this.state.stockPrice} name = {this.state.stockName}/&gt;
              &lt;/div&gt;
         &lt;/div&gt;
      )
    }
  }
  
  export default App;
  </code></pre>
  <p>Here is my StockItem.js component</p>
  <pre><code>
  function StockItem (props) {
      
      return (
         &lt;div className = &quot;stockItem&quot;&gt;
             &lt;h2&gt;Stock Symbol: {props.symbol} Stock Name: {props.name}&lt;/h2&gt;
             &lt;h3&gt;Stock Price: {props.price}&lt;/h3&gt;
         &lt;/div&gt;
      )
  }
  
  export default StockItem
  </code></pre>
  <p>Here is my Index.js</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  
  reportWebVitals();
  
  </code></pre>
  <p>Also I am not sure if it is ok to share my API key publicly so I purposely left it out. If I can safely share it and it would help with solving the problem then please let me know. Again, I am new to this and there are a lot of things in this that I just don't know.</p>