How to find error (“Unexpected token”) in React.js?
0
I have been making great progress and all of the sudden everything broke. I'm getting the following error message in my browser:
./src/PokedexSelector.js
Syntax error: Unexpected token (48:9)
46 |
47 |
> 48 | export default PokedexSelector;
| ^
49 |
This doesn't make any sense to me as I have tried changing many things in the code and looking for missing curly braces etc but cannot identify the source of trouble. Even when I change things, the error just jumps around. For example, if I remove the last line and refresh, I get this:
./src/PokedexSelector.js
Syntax error: Unexpected token (46:0)
44 | )
45 | }
> 46 |
| ^
...doesn't make any sense to me.
Here is the whole file:
import React, { Component } from 'react';
import { capitalize } from './HelperFunctions';
class PokedexSelector extends Component {
constructor(props) {
super(props);
this.state = {value: "National", pokedexes: };
this.handleChange = this.handleChange.bind(this);
this.generatePokedexList = this.generatePokedexList.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
generatePokedexList() {
const pokedexes = this.state.pokedexes;
fetch("https://pokeapi.co/api/v2/pokedex/")
.then(response => response.json())
.then(myJson => {
let results = myJson["results"];
results.forEach(function(pokedex) {
let pokedexName = pokedex["name"];
let pokedexLink = "https://pokeapi.co/api/v2/pokedex/" + pokedexName;
let pokedexDisplayName = capitalize(pokedexName.replace('-',' '));
pokedexes.push(
{
name: pokedexName,
"displayName": pokedexDisplayName,
"link": pokedexLink
}
);
});
})
}
render() {
this.generatePokedexList();
return (
<select id="pokedex-selector" value={this.state.value} onChange={this.handleChange()}>
<option> {capitalize(this.state.value)} </option>
</select>
)
}
export default PokedexSelector;
reactjs error-handling syntax-error
edited Nov 16 '18 at 8:01
halfer
14.6k758113
asked Nov 15 '18 at 0:56
HB11HB11
155
add a comment |
0
I have been making great progress and all of the sudden everything broke. I'm getting the following error message in my browser:
./src/PokedexSelector.js
Syntax error: Unexpected token (48:9)
46 |
47 |
> 48 | export default PokedexSelector;
| ^
49 |
This doesn't make any sense to me as I have tried changing many things in the code and looking for missing curly braces etc but cannot identify the source of trouble. Even when I change things, the error just jumps around. For example, if I remove the last line and refresh, I get this:
./src/PokedexSelector.js
Syntax error: Unexpected token (46:0)
44 | )
45 | }
> 46 |
| ^
...doesn't make any sense to me.
Here is the whole file:
import React, { Component } from 'react';
import { capitalize } from './HelperFunctions';
class PokedexSelector extends Component {
constructor(props) {
super(props);
this.state = {value: "National", pokedexes: };
this.handleChange = this.handleChange.bind(this);
this.generatePokedexList = this.generatePokedexList.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
generatePokedexList() {
const pokedexes = this.state.pokedexes;
fetch("https://pokeapi.co/api/v2/pokedex/")
.then(response => response.json())
.then(myJson => {
let results = myJson["results"];
results.forEach(function(pokedex) {
let pokedexName = pokedex["name"];
let pokedexLink = "https://pokeapi.co/api/v2/pokedex/" + pokedexName;
let pokedexDisplayName = capitalize(pokedexName.replace('-',' '));
pokedexes.push(
{
name: pokedexName,
"displayName": pokedexDisplayName,
"link": pokedexLink
}
);
});
})
}
render() {
this.generatePokedexList();
return (
<select id="pokedex-selector" value={this.state.value} onChange={this.handleChange()}>
<option> {capitalize(this.state.value)} </option>
</select>
)
}
export default PokedexSelector;
reactjs error-handling syntax-error
edited Nov 16 '18 at 8:01
halfer
14.6k758113
asked Nov 15 '18 at 0:56
HB11HB11
155
2
Your curly braces are not balanced. Add another closing}after the render method to close out the class before theexport defaultline.
– Danny Delott
Nov 15 '18 at 1:00
add a comment |
0
0
0
I have been making great progress and all of the sudden everything broke. I'm getting the following error message in my browser:
./src/PokedexSelector.js
Syntax error: Unexpected token (48:9)
46 |
47 |
> 48 | export default PokedexSelector;
| ^
49 |
This doesn't make any sense to me as I have tried changing many things in the code and looking for missing curly braces etc but cannot identify the source of trouble. Even when I change things, the error just jumps around. For example, if I remove the last line and refresh, I get this:
./src/PokedexSelector.js
Syntax error: Unexpected token (46:0)
44 | )
45 | }
> 46 |
| ^
...doesn't make any sense to me.
Here is the whole file:
import React, { Component } from 'react';
import { capitalize } from './HelperFunctions';
class PokedexSelector extends Component {
constructor(props) {
super(props);
this.state = {value: "National", pokedexes: };
this.handleChange = this.handleChange.bind(this);
this.generatePokedexList = this.generatePokedexList.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
generatePokedexList() {
const pokedexes = this.state.pokedexes;
fetch("https://pokeapi.co/api/v2/pokedex/")
.then(response => response.json())
.then(myJson => {
let results = myJson["results"];
results.forEach(function(pokedex) {
let pokedexName = pokedex["name"];
let pokedexLink = "https://pokeapi.co/api/v2/pokedex/" + pokedexName;
let pokedexDisplayName = capitalize(pokedexName.replace('-',' '));
pokedexes.push(
{
name: pokedexName,
"displayName": pokedexDisplayName,
"link": pokedexLink
}
);
});
})
}
render() {
this.generatePokedexList();
return (
<select id="pokedex-selector" value={this.state.value} onChange={this.handleChange()}>
<option> {capitalize(this.state.value)} </option>
</select>
)
}
export default PokedexSelector;
reactjs error-handling syntax-error
edited Nov 16 '18 at 8:01
halfer
14.6k758113
asked Nov 15 '18 at 0:56
HB11HB11
155
I have been making great progress and all of the sudden everything broke. I'm getting the following error message in my browser:
./src/PokedexSelector.js
Syntax error: Unexpected token (48:9)
46 |
47 |
> 48 | export default PokedexSelector;
| ^
49 |
This doesn't make any sense to me as I have tried changing many things in the code and looking for missing curly braces etc but cannot identify the source of trouble. Even when I change things, the error just jumps around. For example, if I remove the last line and refresh, I get this:
./src/PokedexSelector.js
Syntax error: Unexpected token (46:0)
44 | )
45 | }
> 46 |
| ^
...doesn't make any sense to me.
Here is the whole file:
import React, { Component } from 'react';
import { capitalize } from './HelperFunctions';
class PokedexSelector extends Component {
constructor(props) {
super(props);
this.state = {value: "National", pokedexes: };
this.handleChange = this.handleChange.bind(this);
this.generatePokedexList = this.generatePokedexList.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
generatePokedexList() {
const pokedexes = this.state.pokedexes;
fetch("https://pokeapi.co/api/v2/pokedex/")
.then(response => response.json())
.then(myJson => {
let results = myJson["results"];
results.forEach(function(pokedex) {
let pokedexName = pokedex["name"];
let pokedexLink = "https://pokeapi.co/api/v2/pokedex/" + pokedexName;
let pokedexDisplayName = capitalize(pokedexName.replace('-',' '));
pokedexes.push(
{
name: pokedexName,
"displayName": pokedexDisplayName,
"link": pokedexLink
}
);
});
})
}
render() {
this.generatePokedexList();
return (
<select id="pokedex-selector" value={this.state.value} onChange={this.handleChange()}>
<option> {capitalize(this.state.value)} </option>
</select>
)
}
export default PokedexSelector;
reactjs error-handling syntax-error
reactjs error-handling syntax-error
edited Nov 16 '18 at 8:01
halfer
14.6k758113
asked Nov 15 '18 at 0:56
HB11HB11
155
edited Nov 16 '18 at 8:01
halfer
14.6k758113
asked Nov 15 '18 at 0:56
HB11HB11
155
edited Nov 16 '18 at 8:01
halfer
14.6k758113
edited Nov 16 '18 at 8:01
halfer
14.6k758113
edited Nov 16 '18 at 8:01
halfer
14.6k758113
14.6k758113
asked Nov 15 '18 at 0:56
HB11HB11
155
asked Nov 15 '18 at 0:56
HB11HB11
155
asked Nov 15 '18 at 0:56
HB11HB11
155
155
2
Your curly braces are not balanced. Add another closing}after the render method to close out the class before theexport defaultline.
– Danny Delott
Nov 15 '18 at 1:00
add a comment |
2
Your curly braces are not balanced. Add another closing}after the render method to close out the class before theexport defaultline.
– Danny Delott
Nov 15 '18 at 1:00
2
2
Your curly braces are not balanced. Add another closing
} after the render method to close out the class before the export default line.– Danny Delott
Nov 15 '18 at 1:00
Your curly braces are not balanced. Add another closing
} after the render method to close out the class before the export default line.– Danny Delott
Nov 15 '18 at 1:00
add a comment |
1 Answer
1
active
oldest
votes
2
Add "}" after render. Class is still open.
answered Nov 15 '18 at 1:19
TapasTapas
489210
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310972%2fhow-to-find-error-unexpected-token-in-react-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Add "}" after render. Class is still open.
answered Nov 15 '18 at 1:19
TapasTapas
489210
add a comment |
2
Add "}" after render. Class is still open.
answered Nov 15 '18 at 1:19
TapasTapas
489210
add a comment |
2
2
2
Add "}" after render. Class is still open.
answered Nov 15 '18 at 1:19
TapasTapas
489210
Add "}" after render. Class is still open.
answered Nov 15 '18 at 1:19
TapasTapas
489210
answered Nov 15 '18 at 1:19
TapasTapas
489210
answered Nov 15 '18 at 1:19
TapasTapas
489210
answered Nov 15 '18 at 1:19
TapasTapas
489210
489210
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310972%2fhow-to-find-error-unexpected-token-in-react-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Your curly braces are not balanced. Add another closing
}after the render method to close out the class before theexport defaultline.– Danny Delott
Nov 15 '18 at 1:00