axios cannot resolve state element react

axios, ecmascript-6, javascript, reactjs

Solution

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)

Problem

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

Original source