axios cannot resolve state element react

Question

I am fairly new to react and following a tutorial. The instructor is using axios to pull some data from a github api. Following is what he suggests as an onSubmit event handler:

handleSubmit = (event) => {
    event.preventDefault();
  console.log('event: form submit ' + this.state.userName )
  axios.get('https://api.github.com/users/${this.state.userName}')
    .then(resp => {
        console.log(resp)
    });

}

However, when I run it, this.state.userName doesnt get resolved and i receive 404. Is there something wrong with the code or axios is updated? I am using jscomplete/repl playground to work with it.

Help appreciated!

Following is the component Code:

class Form extends React.Component {

    state = {
userName: '  ',
event: ' '
}

handleSubmit = (event) => {
    event.preventDefault();
  console.log('event: form submit ' + this.state.userName )
  axios.get('https://api.github.com/users/${this.state.userName}')
    .then(resp => {
        this.setState({event: resp})
    });
  console.log(event)
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <input type="text"
                    value={this.state.userName}
        onChange={(event) => this.setState({userName: event.target.value})}
                    placeholder={ this.state.username } required 
      />
      <button>Add Card</button>
    </form>
  )
}
}

just FYI, I am getting this: GET https://api.github.com/users/$%7Bthis.state.userName%7D 404 (Not Found) — Omkar, Apr 29 '17 at 15:34
can you show how you are calling it? may be full component code — Priyesh Kumar, Apr 29 '17 at 15:34
Then surely this.state.userName will be undefined! Beside you are missing **`** (backtick) — Priyesh Kumar, Apr 29 '17 at 15:36

Sagiv b.g · Accepted Answer · 2018-09-16T14:33:59.933

5

you are not using the ES6 Template literals like you should.
in this line you wrapped the string with ':
'https://api.github.com/users/${this.state.userName}'

wrap it with back-ticks (`) (with the tilde button)

edited Sep 16 '18 at 14:33

answered Apr 29 '17 at 15:34

Sagiv b.g

30,379
9
68
99

uhh...that was a very lame mistake of mine @Sag1v... help appreciated bud! – Omkar Apr 29 '17 at 15:36
Interestingly, i am getting garbage in the resolved url: https://api.github.com/users/%20%20ovk23.. cant understand this %20%20! Is this because of the wrong use of 'this'? – Omkar Apr 29 '17 at 15:44
1

its a url encoded value `%20` is a `space`, seems like you have double space in your value. try to trim this vlue and you will get https://api.github.com/users/ovk23 – Sagiv b.g Apr 29 '17 at 15:48

score 0 · Answer 2 · answered Apr 29 '17 at 15:41

0

You really should be using constructor to initialize state variables. Use backtick(`) to replace variables in string. Also bind function to class to use this context. Try following code

class Form extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            userName: '  ',
            event: ' '
        }

        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleSubmit = (event) => {
        event.preventDefault();
        console.log('event: form submit ' + this.state.userName)
        axios.get(`https://api.github.com/users/${this.state.userName}`)
            .then(resp => {
                this.setState({ event: resp })
            });
        console.log(event)
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text"
                    value={this.state.userName}
                    onChange={(event) => this.setState({ userName: event.target.value })}
                    placeholder={this.state.username} required
                />
                <button>Add Card</button>
            </form>
        )
    }
}

answered Apr 29 '17 at 15:41

Priyesh Kumar

2,837
1
15
29

I had assumed, in the ES6 syntax you can directly use state variable rather than declaring a constructor... surely i will try this though. – Omkar Apr 29 '17 at 15:43
You can, but `bind` function has real place in `constructor` or `componentDidMount`. Its my preference to bind them in constructor if they are few – Priyesh Kumar Apr 29 '17 at 15:44
Interestingly, i am getting garbage in the resolved url: api.github.com/users/%20%20ovk23.. cant understand this %20%20! Is this because of the wrong use of 'this'? – Omkar Apr 29 '17 at 15:44
1

%20%20 is space. Because you have `this.state.username = ' '`. Notice the space. Try putting some valid value – Priyesh Kumar Apr 29 '17 at 15:45
finally... thanks Priyesh Kumar! It did work ultimately... 1/2 hour of headache gone.. :) – Omkar Apr 29 '17 at 15:46

axios cannot resolve state element react

2 Answers2