Editing and updating an object text value from textinput

Question

I need help to understand how to update the text value of the individual object when I add a new text and press outside the textinput (using onBlur) in my editGoal file, right now the text just "bounces" back when I try to write in it:

Context file

export const GoalsListContext = createContext()

const GoalsListContextProvider = ({children}) => {

const [goals, setGoals] = useState([{text: 'Clean the house', id:'1'}, {text: 'Wash dishes', id:'2'}])

const [selectedGoal, setSelectedGoal] = useState(null)

const addGoal = (goal) => {
    setGoals([...goals, {text: goal, id:`${Math.random()}`}])
    }


const focusGoal = (goal) =>{
    setSelectedGoal(goal)
}

const removeGoal = (id) =>{
setGoals(goals.filter((goal)=>{
    return goal.id !== id
}))
}


const updateGoal = (value) =>{
    console.log(value)
}



return(
    <GoalsListContext.Provider value={{goals, addGoal, focusGoal, selectedGoal, removeGoal, updateGoal}}>
        {children}
    </GoalsListContext.Provider>
)
}

export default GoalsListContextProvider

editGoal.js

export default EditGoal = ({navigation}) => {
    const {selectedGoal, removeGoal, updateGoal} = useContext(GoalsListContext)


    const handleDelete  = () =>{     
        removeGoal(selectedGoal.id)
        navigation.goBack()
    }

    const handleUpdateGoal = (v) => {
        updateGoal(v)
    }  




    return(
        <View style={styles.mainContainer}>
             <TouchableOpacity style={styles.trashContainer} onPress={handleDelete}>
                <FontAwesome name="trash" size={40} color="white"/>
            </TouchableOpacity>

            <View style={styles.firstContainer}>

            
                <TextInput
                style={styles.goalTitle}
                value={selectedGoal.text}
                onChangeText={(text)=>{handleUpdateGoal(text)}}
                onBlur={()=>{}} (THIS IS HOW I WANT TO UPDATE THE STATE)
                />




                <Text style={styles.percentageTitle}>0% Complete</Text>
            </View>

            <View style={styles.secondContainer}>
                <Text style={styles.todoTitle}>My todos</Text>
            </View>
        </View>
    )
}

Don't know if this is needed but here is the home.js as well

export default Home = ({navigation}) => {
    const {goals, focusGoal} = useContext(GoalsListContext)


    const handleSettingPress = (goalId) => {
        const clickedGoal = goals.filter
             (goal => goal.id === goalId)[0] 

        focusGoal(clickedGoal)

        navigation.navigate("EditGoal")
    }


    return(
        <SafeAreaView style={styles.container}>

            <FontAwesome name="plus-circle" size={60} color="black" onPress={()=>navigation.navigate("AddGoal")} />

                       {goals.length ? (
                            <FlatList
                            data={goals}
                            keyExtractor={(goal)=>goal.id}
                            renderItem={({item})=> {
                                return <View style={styles.goalContainer}>
                                    <Text style={styles.goalContainerText}>{item.text}</Text>

                                     <TouchableOpacity onPress={() => {handleSettingPress(item.id)}}>
                                    
                                    <FontAwesome name="edit" size={35} color="white" />
                                </TouchableOpacity>
                                </View>
                            }}  
                            />) 
                        : (<Text style={styles.extraText}>Add a goal!</Text>)}
                


        </SafeAreaView>
    )
}


    

Answer 1

Basically, you want to include a way of updating the selectedGoal variable since that is the value that is being passed to the TextInput.

So your updateGoal function would have to be something like this:

const handleUpdateGoal = (value) => {
  focusGoal({...selectedGoal, text: value})
}

I identified focusGoal as the way to change the selectedGoal because that is precisely what the function is being used for in your context file.

Answer 2

You need to update the variable of the value to see a change because in your example selectedGoal.text never change

<TextInput
  style={styles.goalTitle}
  value={selectedGoal.text}
  onChangeText={(text)=>{handleUpdateGoal(text)}}
  onBlur={()=>{}} (THIS IS HOW I WANT TO UPDATE THE STATE)
/>

See this example and apply to you need https://reactnative.dev/docs/textinput