React - unexpected token, expected ;

Question

the error that is thrown out is: Unexpected token, expected; (9:16) This points to the first line of the renderNumbers() function. What's wrong with my syntax? I'm a bit confused as to what needs to be changed here to make it work.

import React, { PropTypes } from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; renderNumbers() { return this.props.numbers.map(n => <Text>{n}</Text> ); } export default class Counter extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.appName}> Countly </Text> <Text style={styles.tally}> Tally: {this.props.count} </Text> <Text style={styles.tally}> Numbers: {this.props.numbers} </Text> <View> {this.renderNumbers()} </View> <TouchableOpacity onPress={this.props.increment} style={styles.button}> <Text style={styles.buttonText}> + </Text> </TouchableOpacity> <TouchableOpacity onPress={this.props.decrement} style={styles.button}> <Text style={styles.buttonText}> - </Text> </TouchableOpacity> <TouchableOpacity onPress={this.props.power} style={styles.button}> <Text style={styles.buttonText}> pow </Text> </TouchableOpacity> <TouchableOpacity onPress={this.props.zero} style={styles.button}> <Text style={styles.buttonText}> 0 </Text> </TouchableOpacity> </View> ); } } Counter.propTypes = { count: PropTypes.number, numbers: PropTypes.func, increment: PropTypes.func, decrement: PropTypes.func, zero: PropTypes.func, power: PropTypes.func }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF' }, appName: { fontSize: 20, textAlign: 'center', margin: 10 }, tally: { textAlign: 'center', color: '#333333', marginBottom: 20, fontSize: 25 }, button: { backgroundColor: 'blue', width: 100, marginBottom: 20, padding: 20 }, buttonText: { color: 'white', textAlign: 'center', fontSize: 20 } });

Thank you for your help.

CHECK YOUR FILE EXTENSION, SHOULD BE .tsx

mercury
– mercury

2021-02-20 03:01:48 +00:00
Commented Feb 20, 2021 at 3:01 — mercury
– mercury, Commented Feb 20, 2021 at 3:01

Philip Tzou · Accepted Answer · 2017-01-23 21:32:01Z

11

Shouldn't you use function renderNumbers()? It looks like renderNumbers is not a method of class Counter but an individual function in your code.

Btw, renderNumbers was defined twice, although it's legal and not the cause of the problem.

Edit:

If you want to declare renderNumbers() as a prototype method of class Counter, define it inside of the class:

export default class Counter extends React.Component { renderNumbers() { ... } ... }

Otherwise, use keyword function to define a function:

function renderNumbers() { ... }

It's just the syntax of ES6.

edited Jan 23, 2017 at 21:32

answered Jan 23, 2017 at 21:21

Philip Tzou

6,5582 gold badges22 silver badges31 bronze badges

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

5 Comments

Wasteland Over a year ago

Sorry about renderNumbers being twice. That's not the problem. Was supposed to remove it before posting it here.

Philip Tzou Over a year ago

@Wasteland just check my first sentence.

Wasteland Over a year ago

isn't the word 'function' used only for stateless components? When it's a class component, it's supposed to be nameOfFunction() {}. Am I right?

praveenkumar Over a year ago

Thank you Philip Tzou, Your answer helped me.... I have one more doubt also this error also occurs variable declaration also if i defined it in inside the class else if i defined it in inside the render the error is not raised.

Philip Tzou Over a year ago

@praveenkumar: If you defined the function inside of render() then it was a closure function but not a prototype method. See: developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Austin Hunt · Accepted Answer · 2017-01-23 21:42:31Z

The reason your component is experiencing this error is because of the following: 1. If you define a function outside of an ES6 class you must use the function keyword. If you do this, though, the this reference will be undefined when you call that function. 2. If you define a function inside of a React Component (which is just an ES6 class), you do not need the "function" keyword in front of the function definition.

Option 1:

function renderNumbers() { return <Text>...</Text> } class Counter extends React.component { render() { /* Render code... */ } }

Option 2:

class Counter extends React.component { renderNumbers() { return <Text>...</Text> } render() { /* Render code... */ } }

The reason you were getting the error you described is because the Javascript compiler thinks you are "calling" and not "defining" renderNumbers(). So...it gets to the ) and expects either a newline or ; but it sees a { and throws an error.

Don't forget to use the this keyword if you use Option 2 to call renderNumbers()

Jeremy Thompson · Accepted Answer · 2023-01-03 03:47:38Z

If you have something like:

import partys from "../data/TimeLines2000.json"; const Timeline = () => { return ( <div> <-- you will get the error if you're missing a wrapper element {partys.map(party => <> <div className='partyContainer'>

Seema giri · Accepted Answer · 2021-09-07 05:13:23Z

if inside a function based component, you declare functions (before return), it is good if you use the function keyword (then it will not throw the ; required error)

Collectives™ on Stack Overflow

React - unexpected token, expected ;

4 Answers 4

5 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Related