can not add user input to the api

Here is the code and the cosole.log is showing the correct value of the city. value of the city is passing from another js file.

import React from 'react';
import  { useState,useEffect } from 'react';
import ReactDOM from 'react-dom';

const Content=(city)=>{

const [cities, setItems] = useState([]);
console.log(city);


useEffect((city) => {
fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${city},LK&mode=json ,appid=5c4420d5c8a61c16e5ee37e4ca265763`)
  .then(res => res.json())
  .then(
    (result) => {
      setItems(cities => cities.concat(result));
    },
  )
  },[]);

  console.log(cities);

 return (
  
  
  <h2>hello</h2>
  );
}


export default Content;

I think the problem is with the ${city} but I tried everything that I know to solve it.

1 thought on “can not add user input to the api”

  1. I think the problem might be in the URL, where you have a typo for the query params (you have a comma between mode and appid and it should be a &).

    It should be

    fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${city},LK&mode=json&appid=5c4420d5c8a61c16e5ee37e4ca265763`)
    

    By the way, mode=json is not necessary, since JSON is the default response mode.

    Reply

Leave a Comment