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.

Answer 1

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.

Answer 2

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()