CODEWITHSUNDEEP
react-native
Adonis
Adonis

Reputation: 17

(Render Error) Element type is invalid: expected a string(for built-in components)or a class/function(for composite components) but got: undefined

i am trying to learn react native but i faced with this error:

Element type is invalid: expected a string(for built-in components)or a class/function(for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in or you might hace mixed up default and named imports.

Check the render method of 'GoalInput'(I am sure i didn't made a typo first'l' and after that 'i' letter)

my App.js code:

import { useState } from "react";
import { StyleSheet, View, FlatList, Button } from "react-native";
import { StatusBar } from "expo-status-bar";
import GoalItem from "./components/GoalItem";
import GoalInput from "./components/GoalInput";

return (
    <>
      <StatusBar/>
      <View>
        <Button onPress={startAddGoalHandler}/>
        <GoalInput
          visible={modalIsVisible}
          onAddGoal={addGoalHandler}
          onCancel={endAddGoalHandler}
        />
      </View>
    </>
  );

my GoalInput.js code:

import { useState } from "react";
import { StyleSheet,Button,TextInput,View,Model,Image} from "react-native";

const GoalInput = (props) => {
  const [enteredGoalText, setEnteredGoalText] = useState("");

  const goalInputHandler = (enteredText) => {
    setEnteredGoalText(enteredText);
  };

  const addGoalHandler = () => {
    props.onAddGoal(enteredGoalText);   
    setEnteredGoalText("");
  };

  return (
    <Model visible={props.visible} animationType="slide">
      <View>
        <Image
          source={require("../assets/Images/goal.png")}
        />
        <TextInput
          onChangeText={goalInputHandler}
          value={enteredGoalText}
        />
        <View>
          <View>
            <Button title="Add Goal" onPress={addGoalHandler} color="#b180f0" />
          </View>
          <View>
            <Button title="Cancel" onPress={props.onCancel} color="#f31282" />
          </View>
        </View>
      </View>
    </Model>
  );
};

export default GoalInput;

I have deleted the style parts for keep question simple and even i search a lot couldn't find the error source on my own thanks for all the attention.

by the way i am using 'expo'

Upvotes: 0

Views: 1064

Answers (1)

Gaurav Roy
Gaurav Roy

Reputation: 12210

There's no Model in react native , its Modal

SO chnage this first :

import { StyleSheet,Button,TextInput,View,Modal,Image} from "react-native";

And also where youve used in

return(
<Modal>
</Modal>
)

Hope it helps. feel free for doubts

Upvotes: 1

Related Questions