TypeError: undefined is not an object (evaluating 'addTodo(title, description).then') in React Native

Question

I m getting the Exception TypeError: undefined is not an object (evaluating 'addTodo(title, description).then') the function was working fine and states are aupdating fine but its not working as expected.

AddTodo.js :

import { useNavigation } from '@react-navigation/native';
import React , {useContext, useState} from 'react';
import { View } from 'react-native';
import { Input , Button} from 'react-native-elements';
import { TextInput } from 'react-native-gesture-handler';
import {cardContext} from '../contextApi/cardContext';


const NewTodoInput = () =>{
const { addTodo } = useContext(cardContext);
const navigation = useNavigation();


const [title , setTitle] = useState()
const [description , setDescription] = useState()

const handleOnSubmit = ()=>{
    
    addTodo(title,description)
    .then((data)=>{
        navigation.navigate('TodoApp');
        console.log('Added Succesfully : ' + data);
    })
    .catch((e)=>{console.log(e)});

}
return (
    <View>
    <Input 
    placeholder = 'Title'
    onChangeText= {(val)=>{setTitle(val)}}
    />
    <Input 
    placeholder = 'Your todo'
    multiline = {true}
    onChangeText = {(val) => {setDescription(val)}}
    />
    <Button 
        buttonStyle= {{backgroundColor : 'black'}}
        title = 'Submit'
        onPress = {handleOnSubmit}
        
        
    />
    </View>

)

}

export default NewTodoInput ;

Context.js

import React , {createContext, useState} from 'react'

export const cardContext = createContext();

const Data = (props) =>{
    const [data , setData] = useState(
        //todo Add id to the data
        [
            {title : 'This is title 1' , Description : 'this is description 1'},
            {title : 'This is title 2' , Description : 'this is description 2'},
            {title : 'This is title 3' , Description : 'this is description 3'},
            {title : 'This is title 4' , Description : 'this is description 4'},



        ]
        
    ) 
    // Addd id to the data
    const addTodo = (title , description) =>{
            
            setData( [...data , {title : title, Description : description}] )
    }
    const removeTodo = (id) => {
        setData(data.filter(data => data.id != id))

    }
    return (
        <cardContext.Provider value= {{data , addTodo}} >
        {props.children}
        </cardContext.Provider>

    )
}
export default Data;

And I m getting following Error :

TypeError: undefined is not an object (evaluating 'addTodo(title, description).then')
- node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
- node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
- node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
- node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
- node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
- node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
- node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
- node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
- node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
- node_modules\regenerator-runtime\runtime.js:293:29 in invoke
- node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
- node_modules\regenerator-runtime\runtime.js:154:27 in invoke
- node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
- node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
- node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue

TypeError: undefined is not an object (evaluating 'addTodo(title, description).then')
- node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
- node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
- node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
- node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
- node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
- node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
- node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
- node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
- node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
- node_modules\regenerator-runtime\runtime.js:293:29 in invoke
- node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
- node_modules\regenerator-runtime\runtime.js:154:27 in invoke
- node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
- node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
- node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue

P.S :- The handleonSubmit was working fine till i added then and catch method to it. Right now i m getting error but my states are still getting added.

Answer 1

If you want to change addTodo such that it returns a promise as stated in the comment then here it is:

const addTodo = (title , description) =>{
   setData( [...data , {title : title, Description : description}] )
   return new Promise((resolve, reject) => {
       resolve("data") // Do something here preferable what you need inside .then()
                      })
}