[ReactNative]stateに保持している配列内の特定の値をrenderメソッド内で表示しようとするとエラーになる

Question

聞きたいこと

React Nativeでstateで保持している配列の中の値をrenderメソッド内で表示したいと思っているのですが、下のようなエラーになってしまっています。

Invariant Violation: Objects are not valid as a React child

実際のコードはこちらです。

• App.js

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

export default class App extends Component{
  constructor(props) {
    super(props);
    const data = [{'Tokyo': 'Shibuya'}, {'Osaka': 'Doutonbori'}];
    this.state = {
      preferences: data
    }
  }
  render(){
    // Shibuyaと表示させたい。
    return(
      <Text>{this.state.preferences[0]['Tokyo']}</Text>
    );
  }
}

上記以外で実施したこと

this.state.preferences[0]['Tokyo']をreturn()の前で別の変数に代入し、その変数を表示するようにしたが同様のエラーになってしまった。

Answer 1

<Text>{this.state.preferences[0]['Tokyo']</Text>

{を閉じてなくないですか？

---

追記
React Nativeじゃない方のReactしかわかんないんでアレですけど、Textってimportしなくても使えるんですか？

Comments

[sabx]

回答ありがとうございます。すいません、誤字でした。。

[sabx]

すいませんTextのimport部分も記載漏れです。。
余分な部分を削ってわかりやすくしようとした際に間違って消してしまいました。

[gentaro]

書いてあるコードと、実際にエラーになっているコードの相違は他にありませんか？
ふつうのReactの方でTextの部分をdivタグに変更して試したらちゃんと表示できました。

[gentaro]

あとなるべく再現性をご自身で確認されてから、そのコードをコピペしてください。
私の指摘した２点だけとっても、正解にはたどり着くためには余計な回り道になってます。

[sabx]

本当にすいませんでした。次回から自分で動作の確認ができたものを使用して質問させていただきます。

[gentaro]

次回はそれで良いですが、今回の件は最終的に修正した現在の質問文のコードでも再現性があるんですか？