skip to Main Content

I’m trying to learn React and I keep getting the error "Syntax Error. Missng semicolon." Can you please help me what’s wrong? Here’s my code:

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

export default function App() {

  onPressButton() {
    alert('You tapped the button!')
  }

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
      <Button onPress={this.onPressButton} title="Press Me" color="#841584"/>
    </View>
  );
}

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

3

Answers


  1. There’s a missing semicolon after that alert

    Edit: Anyway, the error should tell you the line, or appear over it

    Login or Signup to reply.
  2. Semicolons are totally optional in JS and therefore React as well. There must be a style config in your project that is causing these errors. I would ask your team if this is not a side project how that was setup.

    On an unrelated note: I would define your styles above your app function. Functions in JavaScript are hoisted when your script runs. Constants are not. In general you should never call something before it’s defined as that can lead to difficult bugs.

    Login or Signup to reply.
  3. onPressButton() {
      alert('You tapped the button!')
    }
    

    Should be

    function onPressButton() {
      alert('You tapped the button!');
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search