Api to get Eur Usd Java script

So I made that someone can input like our USD and some number and I want API to fetch like our = 1.7 USD here is the code, everything is done except API fetching so when API gets price it will multiply it by user input and get a result.

import React, { Component } from "react";
import NavBar from "./components/navbar";
import Counters from "./components/counters";
import styles from './style.css';
const fetch = require("node-fetch");

class App extends Component {
  constructor(props) {
    super(props);
    this.con = this.con.bind(this);
  }
get(json) {
   var first1 = document.getElementById("first1").value;
}
con() {
  var first1 = document.getElementById("first1").value;
  var select1 = document.getElementById("select1").value;
  var select2 = document.getElementById("select2").value;
  var request = new XMLHttpRequest()

  if (select1 == "EUR"  && select2 == "USD" ){
    fetch("https://api.exchangeratesapi.io/latest")
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((err) => console.log(err));
      
      
      var eurusd = first1 * 1.18;
    

    alert();
    
  }
  if (select1 == "USD"  && select2 == "EUR" ){

    
    
    var usdeur = first1 * 1.18;
  

  
  
}


  
  }
  XX()
  {
      var first1 = document.getElementById("first1").value;
      var select1 = document.getElementById("select1").value;
      
  } 


  render() {
    return (
      <div>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"></link>
        

        <main className="container">
        <div class="i1"> 
        <select name="select1" onchange="XX()" id="select1">
        <option disabled selected>Choose 1st. currency</option>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        </select>
        </div>
        <div class="i2">
        <select name="select2" onchange="XX()" id="select2">
        <option disabled selected>Choose 2nd. currency</option>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        </select>    
          
        </div>
        <div class="centered">

        </div>     
        <div class="centered">
        
        <input type="number" id="first1" name="first1" onchange="XX()"></input>
 
        </div>     
        <div class="ispod">
        <button onClick={this.con}>
           convert
        </button>  
          
        </div>

         
        </main>
      </div>
    );
  }
}

export default App;

Its made with react js.React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props.