CODEWITHSUNDEEP
reactjsreact-native
강성우
강성우

Reputation: 47

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

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.

Upvotes: 0

Views: 571

Answers (1)

glinda93
glinda93

Reputation: 8459

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

Upvotes: 1

Related Questions