Passing multiple form data values between pages...with ease

Question

Okay, so this is only a semi-question. I can't find anything online that tells me how to do what I'm about to ask, but I don't doubt that there are likely tutorials that already exist on this one.

So, imagine that I have three pages: Page 1) Page 2) Page 3).

What I want is to accumulate the data from pages 1) and 2) and display them on page 3). So it would look like this formula here: Page 1) + Page 2) = Page 3)

I already have code that can do this, it's basic routing code. I was wondering if there is a quicker easier way to do it. Here's my code below:

Page1.js

const [ title, setTitle ] = useState('')

    const handleNavigate = ()=>{
      navigation.navigate('Page2', { textValue: title })
    }

      <View>
      <TextInput 
      value={title} 
      onChangeText={setTitle}
      placeholder='Enter Text'
      />
      <Button title='Add title value' onPress={handleNavigate} />
      </View>

Page2.js

 const { textValue } = route?.params

  const [ desc, setDesc ] = useState('')

  const handleNavigate = ()=>{
    navigation.navigate('Page3', { textValue, textValue2: desc })
  }

return(....code that displays values just fine)

Page3.js

  const { textValue } = route?.params
  const { textValue2 } = route?.params 

return(
<View>
   <Text>{ textValue }</Text>
   <Text>{ textValue2 }</Text>
</View>
)

Like I said, the above code works just fine. I'm wondering if there's some way to make Page2.js less messy. Any recommendations on how to shorten the textValue snippets here:

  const handleNavigate = ()=>{
    navigation.navigate('Page3', { textValue, textValue2: desc })
  }

Answer 1

THE BEST WAY TO HANDLE THIS IS TO USE CONTEXT API OR REDUX OR ANY STATE MANAGEMENT.

YOU CAN READ ON HOW TO AVIOD PROPS DRILLING FOR BETTER UNDERSTANDING

STEP 1. Create a context file in FormContext.js

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

const FormContext = createContext(null);

export const FormProvider = ({ children }) => {

const [title, setTitle] = useState('');

const [desc, setDesc] = useState('');

return ( <FormContext.Provider value={{ title, setTitle, desc, setDesc }}>

  {children}

</FormContext.Provider>

); }

export const useForm = () => useContext(FormContext);

STEP 2 : Wrap Your App in the Provider (App.js)

import React from 'react';

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

import { FormProvider } from './FormContext';

import Page1 from './Page1';

import Page2 from './Page2';

import Page3 from './Page3';

const Stack = createStackNavigator();

export default function App() {

return (

<FormProvider>

  <NavigationContainer>

    <Stack.Navigator>

      <Stack.Screen name="Page1" component={Page1} />

      <Stack.Screen name="Page2" component={Page2} />

      <Stack.Screen name="Page3" component={Page3} />

    </Stack.Navigator>

  </NavigationContainer>

</FormProvider>

); }

STEP 3: Use the useForm in your page1 ,page2 and page3

import React from 'react';

import { View, TextInput, Button } from 'react-native';

import { useNavigation } from '@react-navigation/native';

import { useForm } from './FormContext';

export default function Page1() {

const navigation = useNavigation();

const { title, setTitle } = useForm();

return (

<View>

  <TextInput 
    value={title} 
    onChangeText={setTitle}
    placeholder="Enter Text"
  />


  <Button title="Next" onPress={() => navigation.navigate('Page2')} />

); }

PAGE 2

import React from 'react';

import { View, TextInput, Button } from 'react-native';

import { useNavigation } from '@react-navigation/native';

import { useForm } from './FormContext';

export default function Page2() {

const navigation = useNavigation();

const { desc, setDesc } = useForm();

return (

<View>

  <TextInput 
    value={desc} 
    onChangeText={setDesc}
    placeholder="Enter Description"
  />

  <Button title="Next" onPress={() => navigation.navigate('Page3')} />

</View>

);

}

PAGE 3

import React from 'react';

import { View, Text, Button } from 'react-native';

import { useNavigation } from '@react-navigation/native';

import { useForm } from './FormContext';

export default function Page3() {

const navigation = useNavigation();

const { title, desc } = useForm();

return (

<View>

  <Text>Title: {title}</Text>

  <Text>Description: {desc}</Text>

  <Button title="Go to Page1" onPress={() => navigation.navigate('Page1')} />
</View>

);

}