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>
    );
};

CodePudding user response：

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>
    );
};

CodePudding user response：

Use useState and useEffect as a react component not as react native component.

as shown in below example.

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('');
  useEffect(() => {
  dataBaseCollection();
  console.log("Number Added!");
 }, []);
 const dataBaseCollection = () => {
 db.collection('Bench').add({ reps: { newNum } });
}
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={(event) => {
        dataBaseCollection();
      }}
    >
    </TextInput>
  </form>
  </View>
 );
};