CODEWITHSUNDEEP
urlreact-nativeconcatenation
Zuha Karim
Zuha Karim

Reputation: 279

concatenate variable in URL.React Native

I am unable to concatenate state in URL. Have searched but I could not find the solution, and i'm a beginner sorry for asking such a basic question. State has the value before it is sent as a parameter in URL(i have seen it in console), API returns the expected result if I hard code the value, but if a state or even a variable is passed as a parameter it returns error: "NO records found". What am I doing wrong?

   this.state.secid = this.props.navigation.state.params.secid
   console.log(this.state.secid)
   this.state.classid = this.props.navigation.state.params.clasid
   console.log(this.state.classid)

   // Sending Request
  fetch('exampleapi/parameter?
  class=${this.state.classid}&section=${this.state.secid}',{      
      headers:  {      
     'Content-Type':'application/json',
     'credentials': 'same-origin',
     'Accept': 'application/json',
     'Authorization': 'Bearer ' + tokenval  
    }  
    })
    .then((response) => response.json())
    .then((responseJson) => { 
      this.setState({ allstudents : responseJson })
      console.log(this.state.allstudents)
    })

Upvotes: 0

Views: 9722

Answers (3)

Zuha Karim
Zuha Karim

Reputation: 279

I solved this issue by using backtick notation. Replacing ' '(single quote) in URL by ``(back ticks). If anybody wants to read more about backtick notation this is an amazing answer : What is the usage of the backtick symbol (`) in JavaScript?

Upvotes: 1

sghosh968
sghosh968

Reputation: 601

From what I can see in the code added the string concatenation is not done correctly. It should be done as explained below:

this.state.secid = this.props.navigation.state.params.secid

this.state.classid = this.props.navigation.state.params.clasid

const requestURL = `exampleapi/parameterclass=${this.state.classid}&section=${this.state.secid}`

Then, I would recommend to log and check if you are getting the URL as expected. Also I would suggest to stick to do this es6 way rather than using + for concatenation (As using + is more error prone, you might miss a space place where required - In your case the place you are setting Authorization header ).

Moreover why not use the good stuff when its supported out of the box by react native

Some references:

https://developers.google.com/web/updates/2015/01/ES6-Template-Strings#string_substitution

https://facebook.github.io/react-native/docs/javascript-environment.html (search for text Template Literals in the page).

Upvotes: 0

user9779612
user9779612

Reputation:

You need to make following changes in your code

var url = 'exampleapi/parameter?class='+this.state.classid+'&section='this.state.secid;
fetch(url,{      
      headers:  {      
     'Content-Type':'application/json',
     'credentials': 'same-origin',
     'Accept': 'application/json',
     'Authorization': 'Bearer ' + tokenval  
    }  
    })

Concatenation in react native is done by (+) operator. As URL also a string.

Hope it works for you.

Upvotes: 1

Related Questions