Passing object information in React

Question

I've made a simple todo/goals application as a learning project where I use context for state management.

So in the app I create a goal item with unique ID but then I want to be able to enter that specific item when I press the "gear" symbol from the Home screen. (In here I will add ways to edit the text and delete the item later.)

I'm new to context so I get confused when I try to figure out how to pass the information of the item. Please can someone help me, here's the code:

Home.js

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


    const handleSettingPress = () => {
        navigation.navigate("EditGoal")
    }


    return(
        <View style={styles.container}>
            <Button title="Create new goal!" 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}><FontAwesome name="gear" size={30} color="white" /></TouchableOpacity></View>
                            }}  
                            />) 
                        : (<Text>You have no todos</Text>)}
        </View>

editGoal.js

export default EditGoal = () => {

    return(
        <View style={styles.container}>
            ***This is where I want to be able to edit and delete the goal***
        </View>
    )
}

addGoal.js

export default AddGoal = ({navigation, route}) => {
    const {goals, addGoal} = useContext(GoalsListContext)

    const [goal, setGoal] = useState('')

    const handleChange = (text) => {
        setGoal(text)
        }

    const handleAddGoal = () => {
            addGoal(goal)
            setGoal('')
            navigation.goBack()
    }  



    return(
        <View style={styles.container}>
            <Text>Add your goal</Text>
            <TextInput
            placeholder="Name of goal"
            style={styles.input}
            value={goal}
            onChangeText={(text)=>handleChange(text)}
            />
            <Button
            title="Create goal"
            onPress={handleAddGoal}
            />
        </View>
    )
}

My context file:

const GoalsListContextProvider = ({children}) => {

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

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


    

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

Jevon Cochran · Accepted Answer · 2022-01-11 18:56:28Z

1

So you can store a selectedGoal in the context state. You would also need a way to select a goal so also, put something like chooseGoal in the context state. The chooseGoal action should simply set the selectedGoal to whatever is passed in

const chooseGoal = (goal) => setSelectedGoal(goal)

In your handleSettingPress function, you can pass in a goalId as a parameter. And then, in that same function, you want to set the selectedGoal as the goal that has been clicked on:

const handleSettingPress = (goalId) => {
  const clickedGoal = goals.filter(goal => goal === goalId)[0];
  chooseGoal(clickedGoal)
  navigation.navigate(`EditGoal`);
    }

You would have to modify your onPress in the TouchableOpacity as well. Something like this:

onPress={() => handleSettingPress(item.id)}

Now, when you go to the /Editgoal route, you can use the selectedGoal state to render what you want.

edited Jan 11, 2022 at 18:56

answered Jan 11, 2022 at 16:41

Jevon Cochran

1,7842 gold badges17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ollie Over a year ago

Thank you for the answer! So in my specific case how would I do this? I add the "goalId" to be passed along the navigation. But the item.id throws a syntax error warning :/

Jevon Cochran Over a year ago

Can you share a link to the repo?

Jevon Cochran Over a year ago

Also, add me on Discord if you can. That way we can chat and I can help you better. @jevoncochran #5594

Ollie Over a year ago

Ah sorry I mean it displays red lines under the arrow and the curly braces in the end

Ollie Over a year ago

Alright absolutely!

|

Collectives™ on Stack Overflow

Passing object information in React

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related