Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

(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)

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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’

>Solution :

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading