reactjs - How do I call the API?

Question

How do I fix this?

import React from 'react';

function Form() {
    function callWeatherAPI(city) {
        let url = `api.openweathermap.org/data/2.5/weather?q=${city},&appid=3921214e64bf19a2ed23b79c5b270300`;
    }


    function submitForm() {
        // debugger;

        let city = document.forms["myForm"]["city"].value;
        let isValid = validateForm(city);
        if (isValid) {
            // call api
            callWeatherAPI(city);
        } else {
            alert("Please put in value for city");
        }
    }


    function validateForm(city) {
        if (city === "") {
            return false;
        } else {
            return true;
        }
        // return (city === "") ? false : true;
    }


    return ( <
        form name = "myForm"
        onSubmit = {
            submitForm
        } >
        <
        label > City: < /label> <
        input type = "text"
        name = "city" > < /input> <
        input type = "submit" > < /input>   <
        /form>

    );

}


export default Form;

question from:https://stackoverflow.com/questions/65925701/how-do-i-call-the-api

Answer 1

You need to fetch the data from that endpoint, using fetch and the following approach could help:

function Form(){
  const [targetValue, setTargetValue] = useState('');

  async function callWeatherAPI(city){
    const response = await fetch(`endpoint/${city}`);
    return await response.json(); // You will probably receive an object, get the value you want and return it here
  }

  async function submitForm() {
    // You should get the form value using reactivity..
    const city = document.forms["myForm"]["city"].value;
    const isValid = validateForm(city);
    if (isValid) {
      const response = await callWeatherAPI(city);
      setTargetValue(response);
    } else {
      alert("Please put in value for city");
    }
  }

  return (
    <form name="myForm" onSubmit={submitForm}>
      <label>City:</label>
      <input type="text" name="city"></input>
      <input type="submit"></input>
      <p>Response: {targetValue}</p>
    </form>
  );
}