React.js component syntax error (Unexpected token) that I cannot find

Question

Hey everyone and thanks for helping! While updating my ruby on rails app from rails v5.0 to 6.0, I've encountered an error with one of my react components and despite the fact I tried to fix it with many JS linters, I couldn't find any proper solution.

That's the output I get:

SyntaxError: unknown: Unexpected token (3:8)
  1 | class AvatarUploadInline extends React.Component {
  2 | 
> 3 |   state = { url: this.props.url };
    |         ^
  4 | 
  5 |   trigger = (event) => {
  6 |     event.preventDefault();

And this is the component itself:

class AvatarUploadInline extends React.Component {

  state = { url: this.props.url };

  trigger = (event) => {
    event.preventDefault();
    $("#artist_avatar").click();
  }

  showPreview = (changeEvent) => {
    changeEvent.preventDefault();
    var reader = new FileReader();
    reader.onload = (fileReadEvent) => {
      this.setState({ url: fileReadEvent.target.result });
    };
    reader.readAsDataURL(changeEvent.target.files[0]);
  }

  render () {
    return <div className="m-form__upload-avatar">
      <input name="artist[avatar]" id="artist_avatar" type="file" onChange={this.showPreview} />
      <span id="avatar" style={{ backgroundImage: `url(${this.state.url})` }} className="m-form__upload-avatar__image" />
      <span className="m-form__upload-avatar__icon" onClick={this.trigger} />
    </div>;
  }
}

Many thanks for your assistance!

there seems to be problem with babel. can you share your .babelrc file — d-saurabh
– d-saurabh, Commented Jun 4, 2020 at 13:30

d-saurabh · Accepted Answer · 2020-06-04 13:49:24Z

1

You can edit your .babelrc file to be able to use this syntax. This ll solve your issues at other places as well like functions.

{
  "presets": [
    ["es2016"],
    "react"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties"
  ]
}

edited Jun 4, 2020 at 13:49

answered Jun 4, 2020 at 13:41

d-saurabh

2461 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gustavo Graupner · Accepted Answer · 2020-06-04 13:45:30Z

0

As described on React documentation, create a constructor and initialize your state there to avoid bugs.

Like this:

class AvatarUploadInline extends React.Component {

 constructor(props) {
  super(props);
  this.state = {
   url: props.url
  }
 }
 ...
}

You can read more about here.

edited Jun 4, 2020 at 13:45

answered Jun 4, 2020 at 13:26

Gustavo Graupner

1444 bronze badges

Collectives™ on Stack Overflow

React.js component syntax error (Unexpected token) that I cannot find

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related