concatenate variable in URL.React Native

Question

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)
    })

score 1 · Answer 1 · answered May 12 '18 at 05:47

1

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.

answered May 12 '18 at 05:47

{message: "Trying to get property 'code' of non-object", I have got this error! Still not working. – Zuha Karim May 12 '18 at 06:41
This is working for me: `fetch(config.host+'/v1/user/login', { method: 'POST', headers: new Headers({ 'Content-Type': 'application/json', }), body: JSON.stringify({ username: 'email@domain.com', password: 'password', }), })` – May 12 '18 at 06:49

score 1 · Accepted Answer · answered May 14 '18 at 05:06

1

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?

answered May 14 '18 at 05:06

Zuha Karim

249
4
13

score 0 · Answer 3 · answered May 13 '18 at 07:55

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).

concatenate variable in URL.React Native

3 Answers3