React Native基礎③～注意点～

import { StatusBar } from 'expo-status-bar';
import { TextInput } from 'react-native';
import { StyleSheet, Text, View, Button} from 'react-native';
import { useState } from 'react';

export default function App() {
  const [inputText, setInputText] = useState("");
  const [name, setName] = useState("");
  return (
    <View style={styles.container}>
      <View style={styles.upper}>
        <Text>名前を入力：</Text>
        <TextInput style={styles.textInput}
                 value={inputText}
                 onChange={(text) => setInputText(text)} />　　・・・①
        <Button title="PUSH"
              onPress={() => {
                setName(inputText);
                setInputText("")
              }}/>
      </View>
      <View style={styles.bottom}>
        <Text>名前：</Text>
        <Text>{name}</Text>
      </View>        
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'column',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  upper: {
    flexDirection: 'row'
  },
  bottom: {
    flexDirection:'row',
    marginTop: 20
  },
  textInput: {
    borderWidth:2,
    width:200,
    marginRight: 20
  }
});

上記は、エラーが出る

①が間違っているからである。

どこがまちがっているだろうか？

onChangeTextプロパティが正解である。

このように、React.jsとプロパティが似て非なることがあるので注意が必要である。

この時のエラーが、

Error: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead.

と出て焦った。なぜこのようなエラーが出たかは不明。

修正すると、問題なく動くようになった。

 

 

 

正解を下記に記載

import { StatusBar } from 'expo-status-bar';
import { TextInput } from 'react-native';
import { StyleSheet, Text, View, Button} from 'react-native';
import { useState } from 'react';

export default function App() {
  const [inputText, setInputText] = useState("");
  const [name, setName] = useState("");
  return (
    <View style={styles.container}>
      <View style={styles.upper}>
        <Text>名前を入力：</Text>
        <TextInput style={styles.textInput}
                 value={inputText}
                 onChangeText={(text) => setInputText(text)} />
        <Button title="PUSH"
              onPress={() => {
                setName(inputText);
                setInputText("")
              }}/>
      </View>
      <View style={styles.bottom}>
        <Text>名前：</Text>
        <Text>{name}</Text>
      </View>        
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'column',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  upper: {
    flexDirection: 'row'
  },
  bottom: {
    flexDirection:'row',
    marginTop: 20
  },
  textInput: {
    borderWidth:2,
    width:200,
    marginRight: 20
  }
});