Change axios get url as per value in ReactJS

Question

This is my first react app and I am trying to fetch API using axios.

The URL can be changed based on a value.

My code is

fetchURL(page,checked) {
  if(checked)
  {
     const apiUrl = 'firstApiURL'
  }
  else {
     const apiUrl = 'secondApiURL';
  }
   axios.get(apiUrl)......
}

It says apiUrl is undefined.

I thought it would be easy to change the API url based on another variable.

Any help is highly appreciated.

Possible duplicate of [Best Way for Conditional Variable Assignment](https://stackoverflow.com/questions/10926853/best-way-for-conditional-variable-assignment) — Emile Bergeron, Nov 11 '19 at 20:57
I knew about scope block but I didn't had that in mind. Just started learning ReactJS. Thanks. — Prithviraj Mitra, Nov 11 '19 at 21:22

score 4 · Accepted Answer · edited Nov 11 '19 at 20:32

Constants are scoped to the block they are declared in (between the { and the } associated with the if and the else respectively and are not accessible outside that scope.

Define a variable outside the block and use that instead.

fetchURL(page,checked) {
  let apiUrl;
  if(checked)
  {
    apiUrl = 'firstApiURL'
  }
  else {
    apiUrl = 'secondApiURL';
  }
   axios.get(apiUrl)......
}

You can then use a default value instead of an else.

fetchURL(page,checked) {
  let apiUrl = 'secondApiURL';
  if(checked)
  {
    apiUrl = 'firstApiURL'
  }
  axios.get(apiUrl)......
}

Or to simplify further and still use const

fetchURL(page, checked) {
  const apiUrl = checked ? 'firstApiURL' : 'secondApiURL';
  axios.get(apiUrl);
}

score 3 · Answer 2 · answered Nov 11 '19 at 20:23

In your code the const are defined in the block scope of {} so they are undefined outside.

Use let so you can assign to it, and declare it outside the if/else

let apiUrl;
if (checked) {
  apiUrl = 'firstApiURL'
} else {
  apiUrl = 'secondApiURL';
}
axios.get(apiUrl)......
}

for more info on block statements and scope read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/statements/block

score 1 · Answer 3 · answered Nov 11 '19 at 20:28

const key word create constant which exists only in blocks in which they were created (let and const words create block-scope variables).

if() { } and else { } are blocks for our created apiUrl, and ``apiUrl do not exist outside them.

You could write let variable outside if and else and then write to it some value. For example:

fetchURL(page,checked) {
  let apiUrl;
  if(checked)
  {
     apiUrl = 'firstApiURL'
  }
  else {
     apiUrl = 'secondApiURL';
  }
   axios.get(apiUrl)......
}

Change axios get url as per value in ReactJS

3 Answers3