エラー Parsing error: Unexpected token, expected ";" (Fatal)

Question

メモアプリの作成をreact native で試みています。

App.js
に以下の通り記載しています。

  render() {

の部分に

ESLintでParsing error: Unexpected token, expected ";" (Fatal)
の表示がされます。

";"を加えれば良いのかと思い付け加えてみましたが、エラー表示は変わりませんでした。
どのようにすれば解決できますでしょうか？

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

export default function App() {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.appbar}>
          <View>
            <Text>MEMOT</Text>
          </View>
        </View>

        <View style={styles.memoList}>
            <View style={styles.memoListItem}>
              <Text style={styles.memoTitle}>あああ</Text>
              <Text style={styles.memoTitle}>いいい</Text>
            </View>
        </View>
      </View>
    );
  }
}

Answer 1

エラーメッセージのとおり、このコードはJavaScriptとして成立していません。

export default function App() {とある通り、これ全体は関数となりますので、その中に書かれたrender()は関数呼び出しとして扱われます。

そして、続く{}をオブジェクトリテラルとして解釈しようとしますが、これはオブジェクトリテラルとして正しくないのでエラーとなります。

render()を書くのはクラスコンポーネントで、関数コンポーネントの場合はreturnで直接JSXを返す形となります。この両者が混ざってしまっているので、どちらかの書き方にしてください。

Comments

[sunsunny-k]

ご回答くださりありがとうございます。
修正後、シュミレーターでエラーなく表示することができました。
ありがとうございます。