React component, unexpected token error

Question

I am trying to create a basic stopwatch app, I'd like to tidy up my render function by putting markup into different methods, like this:

export default class stopwatch extends Component { render() { return <View style={styles.container}> <View style ={[styles.header, this.border('yellow')]}> <View style={this.border('red')} > <Text> 00.00.00 </Text> </View> <View style={this.border('green')} > {this.startStopButton()} {this.lapButton()} </View> </View> <View styles={[style.footer, this.border('blue')]}> <Text> List of Laps </Text> </View> },

I'd like to tidy up my render function by putting markup into different methods, like this:

startStopButton: function(){ return <View> <Text> Start </Text> </View> }, lapButton: function(){ return <View> <Text> Lap </Text> </View> } };

However, I keep getting the error, Unexpected Toekn line 27 which is this line

 startStopButton: function(){ return <View>

Any ideas whats wrong with it?

Ross Allen · Accepted Answer · 2017-02-20 18:35:30Z

You're using ES6 classes. For class methods, you don't use the function keyword. Also, methods are not followed by commas. Drop the comma at the end of render and startTopButton:

export default class stopwatch extends Component { startStopButton() { return <View> <Text> Start </Text> </View> } lapButton() { return <View> <Text> Lap </Text> </View> } render() { return <View style={styles.container}> <View style ={[styles.header, this.border('yellow')]}> <View style={this.border('red')} > <Text> 00.00.00 </Text> </View> <View style={this.border('green')} > {this.startStopButton()} {this.lapButton()} </View> </View> <View styles={[style.footer, this.border('blue')]}> <Text> List of Laps </Text> </View> } }

Collectives™ on Stack Overflow

React component, unexpected token error

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related