Keep geting "Missing semicolon" in React-CodePudding

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',
  },
});

CodePudding user response：

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

Should be

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

CodePudding user response：

There's a missing semicolon after that alert

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

CodePudding user response：

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.