props.AddNewContact is not a function

Trying to create an app that takes user input from the Contact Input component and adds it to a flatlist in the Home screen component. HomeScreen:

function HomeScreen() {
  const [contactList, setContactList] = useState([]);
  const [isAddMode, setIsAddMode] = useState(false);
  const addContactItemHandler = (contactItem) => {
    setContactList((contactList) => [...contactList, { key: Math.random().toString(), value: contactItem }]);
    setIsAddMode(false);
  };
  return (
    <View>
      <ContactInput visible={isAddMode} addNewContact={() => addContactItemHandler} />
      <FlatList
        data={contactList}
        renderItem={(itemData) => <ContactListItem id={itemData.item.key} item={itemData.item.value} />}
      />
    </View>
  );
}

Navigation: 
const Stack = createStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="generic name"
          component={HomeScreen}
          options={({ navigation }) => ({
            headerRight: () => (
              <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
                <Item
                  title="add contact"
                  iconName={Platform.OS === "android" ? "md-add" : "ios-add"}
                  onPress={() => navigation.navigate("ContactInput")}
                />
              </HeaderButtons>
            ),
          })}
        />
        <Stack.Screen name="ContactInput" component={ContactInput} options={{ title: "Add Contact" }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Contact Input screen:

const ContactInput = (props) => {
  const [enteredContactFName, setContactName] = useState("");
  const [enteredContactLName, setContactLName] = useState("");
  const [enteredContactEmail, setContactEmail] = useState("");

  const handleFirstNameChange = (enteredContactFName) => {
    setContactName(enteredContactFName);
  };

  const handleLastNameChange = (enteredContactLName) => {
    setContactLName(enteredContactLName);
  };
  const handleEmailChange = (enteredContactEmail) => {
    setContactEmail(enteredContactEmail);
  };
  console.log(props);
  const addContactHandler = () => {
    props.addNewContact(`${enteredContactFName}  ${enteredContactLName} : ${enteredContactEmail}`);
    setContactFName("");
    setContactLName("");
    setContactEmail("");
  };

  return (
    <Modal visible={props.visible} animationType="fade">
      <View style={styles.inputContainer}>
        <TextInput
          input="text"
          placeholder="Enter First name"
          style={styles.input}
          value={enteredContactFName}
          onChangeText={handleFirstNameChange}
        />
        <TextInput
          input="text"
          placeholder="Enter Last name"
          style={styles.input}
          value={enteredContactLName}
          onChangeText={handleLastNameChange}
        />
        <TextInput
          placeholder="Enter Email"
          style={styles.input}
          onChangeText={handleEmailChange}
          value={enteredContactEmail}
        />
        <View style={styles.button}>
          <Button title="Save" color="purple" alignItems="center" onPress={addContactHandler} />
        </View>
        <Button
          style={styles.button}
          title="Go Back"
          onPress={() => {
            props.navigation.goBack();
          }}
        />
      </View>
    </Modal>
  );
};

When I console log the props, I can see the addNewContact in the object, still I get the error that the function does not exist. Does the prop need to be done in the navigation stack? I am really new to all of this.



Read more here: https://stackoverflow.com/questions/66431714/props-addnewcontact-is-not-a-function

Content Attribution

This content was originally published by Kristina VanderBoog at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: