I am getting this error whenever I try to set the value of my TextInput to a state of the code, here is the code for that:
<TextInput style={styles.inputBox} placeholder="Word Here" onChangeText={text2 => { this.setState({ text: text2 }); }} value={this.state.text}/>here is my entire files code just in case:
import React, { Component } from 'react';import { StyleSheet, Text, View, TextInput, TouchableOpacity,} from 'react-native';import { Header } from 'react-native-elements';import { SafeAreaProvider } from 'react-native-safe-area-context';type prop = {};type state = { text: string, displayText: string, word: string, lexCategory: string, def: string, isSearched: boolean, examples: Array<[]>}export default class App extends Component<prop, state> { getText = (word: string) => { var searchKeyWord = word.toLowerCase(); var url = "https://rupinwhitehatjr.github.io/dictionary/" + searchKeyWord +".json" return fetch(url).then(data => { if (data.status === 200) { return data.json(); } else { return null; } }).then(response => { var responseObj = response console.log(responseObj) if (responseObj) { this.setState({ word: this.state.text.toLowerCase(), lexCategory: responseObj["definitions"][0]["wordtype"], def: responseObj["definitions"][0]["description"], isSearched: false }); } else { this.setState({ word: this.state.text.toLowerCase(), lexCategory: "Word not found", def: "Word not found", isSearched: false }); } }); } render() { return (<SafeAreaProvider><View><Header backgroundColor={'#81007e'} centerComponent={{ text: 'Pocket Dictionary', style: { color: '#fff', fontSize: 20 }, }} /><TextInput style={styles.inputBox} placeholder="Word Here" onChangeText={text2 => { this.setState({ text: text2 }); }} value={this.state.text} /><TouchableOpacity style={styles.searchButton} onPress={() => { this.getText(this.state.text) this.setState({ displayText: this.state.text, isSearched: true }); }}><Text style={styles.searchText}>Search</Text></TouchableOpacity><Text style={styles.words}>Word:</Text><Text style={styles.wordResult}>{this.state.displayText}</Text><Text style={styles.words}>Type:</Text><Text style={styles.wordResult}>{this.state.lexCategory}</Text><Text style={styles.words}>Definition:</Text><Text style={styles.wordResult}>{this.state.def}</Text></View></SafeAreaProvider> ); }}const styles = StyleSheet.create({ inputBox: { marginTop: 100, width: '80%', alignSelf: 'center', height: 40, textAlign: 'center', borderWidth: 4, outline: 'none', }, searchButton: { width: '25%', height: 55, alignSelf: 'center', margin: 20, borderWidth: 5, borderRadius: 20, }, searchText: { textAlign: 'center', fontSize: 30, fontWeight: 'bold', }, words: { textAlign: 'center', color: 'gold', fontSize: 20, fontWeight: 'bold', }, wordResult: { fontSize: 20, fontWeight: 'bold', textAlign: 'center', },});Image of the error on the web page: