❄️React.js how to call an API #React

Create the new application called wolf-of-react
The axios is needed to call an API.

$ yarn create react-app wolf-of-react

$ yarn add axios

You can delete unnecessary parts like this.

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

src/App.js

import React, { Component } from 'react';
import './App.css';
import StockInfo from './components/StockInfo';
import { loadQuoteForStock, loadCompanyLogoForStock } from './api/iex';

class App extends Component {
  state = {
    symbol: 'F',
    quote: null
  }

  componentDidMount(){
    this.loadQuote()
  }

  loadQuote() {
    loadQuoteForStock(this.state.symbol)
    .then((quote)=> {
      console.log(quote)
      this.setState({quote: quote})
    })
    .catch((err)=> {console.log(err)})
  }

  handleSymbolChange =(event)=>{
    const target = event.target;
    const symbol = target.value;
    this.setState({symbol: symbol });
    console.log(event);
  }

  handleButtonClick = (event) => {
    console.log(event.target);
    this.loadQuote();
  }

  render() {
    return (
      <div className="App">
      <h1>Wolf of React</h1>
      <input
      value={this.state.symbol}
      placeholder="Enter symbol"
      onChange={this.handleSymbolChange}
      />
      <button onClick={ this.handleButtonClick }>Get Quote</button>
      <StockInfo {...this.state.quote}/>
      </div>
    )
  }
}

export default App;

Create the components folder in the src folder.
And create the StockInfo.js file in the /src/components folder.

src/components/StockInfo.js

import React from 'react';

function StockInfo({
  symbol,
  companyName,
  primaryExchange,
  latestPrice,
  latestSource,
  week52High,
  week52Low
}){

  return(
    <div>
    <h2>{ symbol }: { companyName }</h2>
    <h3>{ latestPrice } ({ latestSource} )</h3>
    <dl>
    <dt>Week 52 High</dt>
    <dd>{ week52High }</dd>

    <dt>Week 52 Low</dt>
    <dd>{ week52Low }</dd>

    <dt>Exchange</dt>
    <dd>{ primaryExchange }</dd>
    </dl>
    </div>
  )
}

export default StockInfo;

Create the folder called api and the iex.js file in it.

src/api/iex.js

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.iextrading.com/1.0'
});

export function loadQuoteForStock(symbol){
  return api.get(`/stock/${symbol}/quote`)
  .then((res)=>{
    return  res.data
  });
}

$ yarn run start