Search code examples
react-nativesyntax-errorunexpected-token

"SyntaxError: Unexpected token" but no token is specified, the error is indicated to be on whitespace


I'm following this tutorial as I'm a beginner at React Native (and Javascript for that matter), and I'm running into an "Unexpected token" syntax error, but it does not tell me which character is unexpected. I've pasted my code below as well as the error message. Am I doing something totally wrong here?

EmojiDict.js

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

class EmojiDict extends Component {
  state = {
    'A': 'A Smiley',
    'B': 'B Rocket',
    'C': 'C Atom Symbol'
  };

  render() {
    return {
      <View style={styles.container}>
          <Text>{this.state['A']}</Text>
      </View>
    };
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

export default EmojiDict;

App.js

import React, { Component } from 'react';

import EmojiDict from './src/components/EmojiDict';

export default class App extends Component {
    render() {
        return <EmojiDict />;
    }
}

Error Message

error: SyntaxError: /Users/johnking/Documents/Projects/HelloWorld/src/components/EmojiDict.js: Unexpected token (13:6)

  11 |   render() {
  12 |     return {
> 13 |       <View style={styles.container}>
     |       ^
  14 |           <Text>{this.state['A']}</Text>
  15 |       </View>
  16 |     };

Solution

  • You should be return () instead {}.

    render() {
        return (
          <View style={styles.container}>
              <Text>{this.state['A']}</Text>
          </View>
        );
      }