Invariant Violation: View config getter callback for component `input` must be a function (received `undefined`) - react-native

Question

This is my InputItems.js
import React, { useState } from "react";
import { Text, View, StyleSheet, TextInput, Button } from "react-native-web";
function InputItems(props) {
const [inputGoal, setinputGoal] = useState("");
return (
<View style={style.wholeInputcontainer}>
<TextInput
placeholder="Enter the Text"
style={style.textInput}
onChangeText={(enteredtext) => {
setinputGoal(enteredtext);
}}
value={inputGoal}
/>
<Button title="Submit" onPress={props.onpressprop.bind(this,inputGoal)} />
</View>
);
}
const style = StyleSheet.create({
wholeInputcontainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
textInput: {
borderBottomColor: "blue",
borderBottomWidth: 4,
marginBottom: 10,
width: 300,
},
});
export default InputItems;
and this is my App.js
import React, { useState } from "react";
import { StatusBar } from "expo-status-bar";
import {
StyleSheet,
Text,
View,
TextInput,
Button,
ScrollView,
FlatList,
} from "react-native";
import Listitems from "./Components/ListItems";
import InputItems from "./Components/InputItems";
// import { Button, TextInput } from 'react-native-web';
export default function App() {
const [outputGoal, setoutputGoal] = useState([]);
const Onpress = (InputGoalProp) => {
setoutputGoal((Currentgoal) => [...Currentgoal, InputGoalProp]);
};
return (
<View style={style.root}>
<InputItems onpressprop={Onpress} />
{/* We can use mapping from outputGoal but using FlatList instead of ScrollView is more efficient */}
<FlatList
data={outputGoal}
renderItem={(listitems) => <Listitems anything={listitems.item} />}
/>
<StatusBar style="auto" />
</View>
);
}
const style = StyleSheet.create({
//StyleSheet is a class of react-native, we can always use inline styleing
root: {
marginTop: 100,
},
});
Stuck into this problem. Please help me if you can.
This is the error...
Invariant Violation: View config getter callback for component input must be a function (received undefined). Make sure to start component names with a capital letter.
This error is located at:
in input (created by TextInput)
in TextInput (created by InputItems)

Answer 1

You have a typo in this line:
<Button title="Submit" onPress={props.onpressprop.bind(this,inputGoal)} />
There's a comma instead of a period after this. It should be
<Button title="Submit" onPress={props.onpressprop.bind(this.inputGoal)} />

Answer 2

In InputItems.js you still have the wrong import (seems like you have already corrected it in App.js):
change this: import { Text, View, StyleSheet, TextInput, Button } from "react-native-web";
to: import { Text, View, StyleSheet, TextInput, Button } from "react-native";