After a lot of research I'm getting this error every time I enter text into the message box.

I've removed a lot of code - so the issue is with the text Input and var state{ ... }

I have no idea what to do

I plan on submitting the data to a SQLite database in the future, but for now I'm just trying to capture the text input on the button press - i found a script online, but it doesn't work.

  const JournalNewEntryScreen = ({navigation}) => {
  const messageImage = require('./images/Imatter-icons-13.png');
  const homeImage = require('./images/Imatter-icons-14.png');
  const settingsImage = require('./images/Imatter-icons-11.png');
  const journalHomeImage = require('./images/Imatter-icons-09.png');
  const cancelAlert = () =>
    Alert.alert(
      "Are You Sure?",
      "Any content will be deleted and cannot be recovered",
      [
        {
          text: "Cancel",
          style: "cancel"
        },
        { text: "Yes, I'm Sure", 
          onPress: () => navigation.navigate("JournalHome") }
      ]
    );
    var state = {
      message: '',
    }
    const getValues = () => {
      console.log(this.state.message);
    }
    
    
  return (
    <>
    
      <StatusBar barStyle='dark-content' />
      
         <SafeAreaView style={homePage.flexContainer}>
         <View style={{ flex: 1 }}>
            <ScrollView>
             <View style={JournalNewEntryPage.container}>
                <Image
                  source={require("./assets/images/cropped-img_1619-1-e1610564001477.png")}
                  resizeMode="contain"
                  style={JournalNewEntryPage.image}>

                </Image>
                <Text style={JournalNewEntryPage.myJournal}>New Journal Entry</Text>
                <Text style={JournalNewEntryPage.descriptionText}>
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                </Text>
                <Text style={JournalNewEntryPage.messageText}>
                  Type a message
                </Text>
                <TextInput
                  multiline
                  editable
                  numberOfLines={4}
                  style={JournalNewEntryPage.textBox}
                  onChangeText={(text) => this.setState({ message: text })}
                />
                <Text style={JournalNewEntryPage.messageText}>
                  Attach a file:
                </Text>
                <Text style={JournalNewEntryPage.upload}>
                    Add a photo, audio or video file
                </Text>
                <TouchableOpacity onPress={() => this.getValues()}>
                  <Text style = {JournalNewEntryPage.journalButton}>
                    Save Entry
                  </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={cancelAlert}>
                  <Text style = {JournalNewEntryPage.journalButton}>
                    Cancel
                  </Text>
                </TouchableOpacity>
                <View style = {custom.spacer10}></View>
              </View>
             </ScrollView>
         </View>
         {/* <Button title="Reload" onPress={() => navigation.navigate('Home')}/> */}
         <View style={homePage.tabBarContainer}>
             <View style={homePage.column}>
             <TouchableOpacity onPress={hide ? dataButtonHandler : onPress1}>
                 <Text style={hide ? homePage.button : homePage.codeButton}>{hide ? "Data" : "XXXXXX"}</Text>
             </TouchableOpacity>
             </View>
             
             <View style={homePage.column}>
             <TouchableOpacity onPress={() => navigation.navigate('Home')}>
                 <Image style={homePage.navImage} source={homeImage}/>
             </TouchableOpacity>
             </View>
             <View style={homePage.column}>
             <TouchableOpacity onPress={() => navigation.navigate('JournalHome')}>
                 <Image style={homePage.navImage} source={journalHomeImage}/>
             </TouchableOpacity>
             </View>
             <View style={homePage.column}>
             <TouchableOpacity onPress={messagesButtonHandler}>
                 <Image style={homePage.navImage} source={messageImage}/>
             </TouchableOpacity>
             </View>
             <View style={homePage.column}>
             <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
                 <Image style={homePage.navImage} source={settingsImage}/>
             </TouchableOpacity>
             </View>
             <View style={homePage.column}>
             <TouchableOpacity onPress={hide ? logButtonHandler : onPress3}>
                 <Text style={hide ? homePage.button : homePage.codeButton}>{hide ? "Logs" : "XXXXXX"}</Text>
             </TouchableOpacity>
             </View>
         </View>
         <View style={homePage.tabBarContainerText}>
             <View style={homePage.column}>
             </View>
             
             <View style={homePage.column}>
             <TouchableOpacity onPress={() => navigation.navigate('Home')}>
                 <Text style={homePage.button}>Home</Text>
             </TouchableOpacity>
             </View>
             <View style={homePage.column}>
             <TouchableOpacity onPress={() => navigation.navigate('JournalHome')}>
                 <Text style={homePage.button}>Journal</Text>
             </TouchableOpacity>
             </View>
             <View style={homePage.column}>
             <TouchableOpacity onPress={messagesButtonHandler}>
                 <Text style={homePage.button}>Messages</Text>
             </TouchableOpacity>
             </View>
             <View style={homePage.column}>
             <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
                 <Text style={homePage.button}>Settings</Text>
             </TouchableOpacity>
             </View>
             <View style={homePage.column}>
             </View>
         </View>
         </SafeAreaView>
     </>      
  );


};

Image of error

CodePudding user response：

You're using functional component not class-based, so this is not the way to go with declaring states and setState, this only works with class-based component.

So you need to check this doc out for handling states with React Hooks https://reactnative.dev/docs/state