Unexpected token, expected , (28:0), when coding React native

Question

I'm coding my first test app with react-native but I cant get my syntax to work. I dont get this, where Am I doing wrong?

Code:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class Form extends React.Component ({
  getInitialState: function(){
    return {
      userEvent : ""
    }
  },

  handleChange: function(e){
    this.setState({
      userEvent = e.target.value
    })
  },

  render() {
    return (
      <div>
      <h2>{this.userEvent}</h2>
      <input type="text" value={this.state.userEvent} onChange={this.handleChange}/>
      </div>
    )
  }
}

Here is where code states it is expecting ",":

export default class App extends Component {

Any tips?

render() {
    return (
      <Form />
    );
  }
}

export default class App extends Component why are you just using extends Component instead of React.Component as you are just importing React — Aaqib
– Aaqib, Commented Nov 6, 2017 at 22:30

Maxwelll · Accepted Answer · 2017-11-06 23:24:14Z

1

First, you don't use this.setState properly. this.setState takes an object or a function that returns an object as input. {userEvent = e.target.value} is not valid JavaScript...

handleChange: function(e){
  this.setState({
    userEvent: e.target.value,
  })
}

Second, you also forgot to close you Form Component:

render() {
    return (
      <Form />
    );
  }
}

You added ',' after your functions getInitialState and handleChange

Removed the parenthesis after React.Component

Added the bind for the handleChange function

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  getInitialState(){
    return {
      userEvent: ""
    }
  }

  handleChange(e) {
    this.setState({
      userEvent: e.target.value
    });
  }

  render() {
    return (
      <div>
        <h2>{this.userEvent}</h2>
        <input type="text" value={this.state.userEvent} onChange={this.handleChange}/>
      </div>
    )
  }
}

Edit: Answer to your answer

You have an error stating that it does not find the variable Component is because as stated by @Aaqib, you use

export default class App extends Component {

Instead of

export default class App extends React.Component {

edited Nov 6, 2017 at 23:24

Maxwelll

2,2121 gold badge19 silver badges22 bronze badges

answered Nov 6, 2017 at 22:17

yuantonito

1,2828 silver badges17 bronze badges

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

9 Comments

Riku Over a year ago

I edited those, it still gives the same error, expecting ",".

Riku Over a year ago

Hmm, now when i removed them, it keeps saying it expected them?

Parker Ziegler Over a year ago

setState should return a mapping, not an assignment, i.e. this.setState({ userEvent: e.target.value });.

Maxwelll Over a year ago

"First, you don't use this.setState properly. You should use with brackets:' No... setState just takes an object or a function that returns an object as input "You should use brackets" is a poor explanation

yuantonito Over a year ago

@Maxwelll edited accordingly, thanks for being more precise, getting too late :)

|

Collectives™ on Stack Overflow

Unexpected token, expected , (28:0), when coding React native

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related