(React) How to send variable value to other component? - reactjs

Question

It's a nice day.
//App.js
import React, { useEffect, useRef, useState, createContext, useContext } from "react"
import {
StyleSheet, StatusBar, View, Text, Linking, Button,
SafeAreaView, TouchableOpacity, RefreshControl } from 'react-native';
export default function App() {
const wannaConst = 'qwqw'
return (
<View>
<Text>
Good Good
</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
})
//screens > Home > Home.js
import React from 'react'
import { View, Text } from 'react-native'
const Home = () => {
return (
<View>
<Text>{wannaConst}</Text>
</View>
)
}
export default Home
I wanna use App.js's wannaConst's Variable Value
at screens > Home > Home.js
if wannaConst = 'qrqr',
Home components return [qrqr] screens.
or wannaConst = 'help me :(',
Home components return [help me :(] screens...
and so on.
How to solve it? use Redux? or ContextAPI?
Thx for reading.

Answer 1

Both way will work OK. If your project is small or middle-sized, context API will work without any problem.
AppContext.jsx
import {createContext} from 'react';
export default createContext({
wannaConst: 'qwqw'
}); // provide initial value
App.jsx
import React, { useEffect, useRef, useState, createContext, useContext, useCallback } from "react"
import {
StyleSheet, StatusBar, View, Text, Linking, Button,
SafeAreaView, TouchableOpacity, RefreshControl } from 'react-native';
import AppContext from './AppContext'
export default function App() {
// You can manage AppContext state here
const [contextValue, setContextValue] = useState({
wannaConst: 'qrqr' // provide initial value here, default value in AppContext.jsx will be overwritten
}};
// context values are also React states. You can update the state like any other React states
const handlePressButton = useCallback(
() => setContextValue({wannaConst: 'good good'}),
[]);
return (
<AppContext.Provider value={contextValue}>
<View>
<Text>
Good Good
</Text>
<Button onPress={handlePressButton}>
Change context to 'good good'
</Button>
</View>
//... child components that are going to consume AppContext value
</AppContext.Provider>
)
}
Be aware that screens/Home/Home.js should be nested inside AppContext.Provider. Most of the case, it will be like so, because you will create stack/tab navigations and list all the navigation routes and screens under App.jsx.
Home.jsx
import React, {useContext} from 'react'
import { View, Text } from 'react-native'
import AppContext from './AppContext';
const Home = () => {
const appContext = useContext(AppContext);
return (
<View>
<Text>{appContext.wannaConst}</Text>
</View>
)
}
export default Home
Using redux is somewhat difficult but it is almost mandatory in enterprise apps. Here you can find a good source for modern react and redux