React Native not recognizing useState hook

Question

Render Error: (0,_reactNative.usestate) is not a function.(In'(0,_reactNative.useState)(''),'(0,_reactNative.useState)'is undefined

This is the error my code is producing. All the imports are up to date. Not sure why it is not recognizing useState.

import React from 'react';
import { View, StyleSheet,TextInput,useEffect,useState } from 'react-native';
import db from 'D:/App development/PRLog/PrLogBeta/database/firestore'
const EnteryModal = props => {
    const [numReps,setNumReps] = useState('');

    useEffect(() => {
        db.collection('Bench').add({reps:{newNum}})            
      },[]).then(() => {
        console.log('Number Added!');
      });
    return(
        <View style={styles.inputStyle}>
            <form>
                <TextInput
                    style = {styles.inputStyle}
                    keyboardType='number-pad'
                    placeholder={props.RepsOrWeight}
                    placeholderTextColor = 'white'
                    textAlign='center'
                    onChangeText={newNum => setNumReps(newNum)}
                    defaultValue={numReps}
                    onSubmitEditing={useEffect(() => {
                        db.collection('Bench').add({reps:{newNum}})            
                      },[]).then(() => {
                        console.log('Number Added!');
                      })}
>
                </TextInput>
            </form>
            
            
        </View>
    );
};

Answer 1

1. You need to import useState and useEffect from React, not React Native
2. You cannot call .then() on useEffect since it does not return a promise.
3. You can't use useEffect as a callback function.

EDIT: Code example:

Based on the snippet from your question, it seems like you're trying to trigger a POST request to your database on submitting the text input. This can be achieved without useEffect by simply passing a handler function to your text input like so.

import React, { useEffect, useState } from 'react';
import { View, StyleSheet,TextInput } from 'react-native';
import db from 'D:/App development/PRLog/PrLogBeta/database/firestore'
const EnteryModal = props => {
    const [numReps,setNumReps] = useState('');
    
    const handleSubmit = async () => {
        try {
            await db.collection('Bench').add({reps:{newNum}});
            console.log('Number Added!');
        } catch (error) {
            console.log(error)
        }
    }

    return(
        <View style={styles.inputStyle}>
            <form>
                <TextInput
                    style = {styles.inputStyle}
                    keyboardType='number-pad'
                    placeholder={props.RepsOrWeight}
                    placeholderTextColor = 'white'
                    textAlign='center'
                    onChangeText={newNum => setNumReps(newNum)}
                    defaultValue={numReps}
                    onSubmitEditing={handleSubmit}
                >
                </TextInput>
            </form>
        </View>
    );
};