Adding Variable to URL In React

Question

I need to pass city name in URL. I have declared Variable city and I am passing it in URL but it is not reading variable I have tried many methods but they are not working.

   const Weather=({city})=>{
  const [weather,setWeather]=useState('')
    useEffect(() => {
  
    axios
      .get(`http://api.weatherstack.com/current?access_key=58hgf1d8d36bf336f347d6cc9fbc7&query=${city}`)
      .then(response => {
        setWeather(response.data) 
      })
  }, []) 
// ...

Jamie Counsell · Accepted Answer · 2021-02-03 18:23:16Z

2

You're using incorrect template literal syntax. You need:

.get(`http://api.weatherstack.com/current?access_key=Your_access_Key&query=${city}`)

But it also looks like you're missing an access key in this request.

answered Feb 3, 2021 at 18:23

Jamie Counsell

8,1626 gold badges55 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roger Jacob · Accepted Answer · 2021-02-03 18:25:00Z

1

It should be ` instead of ' as follows:

axios.get(`http://api.weatherstack.com/current?access_key=Your_access_Key&query=${city}`)
    .then(response => {
      setWeather(response.data) 
    })

Hope this resolves the issue while passing dynamic city to the URL. Also make sure that you are passing the right access_key too.

answered Feb 3, 2021 at 18:25

Roger Jacob

3602 silver badges12 bronze badges

5 Comments

tensm Over a year ago

.get(http://api.weatherstack.com/current?access_key=65f1d8d367f596bf336f347d6cfbc7&query=${city}) .then(response => { setWeather(response.data) }) }, []) It is also not working access key used is also correct.

Roger Jacob Over a year ago

I tried accessing the URL with Germany as the query param. It returns the error "invalid_access_key". Please have a look at it. Try generating a new access key & give it a try. That should resolve the issue.

Roger Jacob Over a year ago

Yeah, this works. here's the working URL for reference - api.weatherstack.com/…

Roger Jacob Over a year ago

Check whether you are getting the value for "city" properly from the parent component. If that's correct, this code should work.

tensm Over a year ago

there was error i was passing it as a capital . Thankyou for your help

Collectives™ on Stack Overflow

Adding Variable to URL In React

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related