How to pass data from one component to another in react native

Question

i have a main component where i have imported one component, so i want to pass some data from that imported component to the main component and display it. here is an example code: this is my main file:

import React from "react";
import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
import TestComponent from "../components/TestComponent";
function TestScreen(props) {
  return (
    <View>
      <TestComponent />
      <Text>{location}</Text>
    </View>
  );
}

export default TestScreen;

and this is the Imported component:

import React from "react";
import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
function TestComponent(props) {
  const [location, setLocation] = useState("");
  return (
    <View>
      <Text>Boiler</Text>
      <TouchableOpacity>
        <Text onPress={() => setLocation("Me")}>Click</Text>
      </TouchableOpacity>
    </View>
  );
}

export default TestComponent;

now i want to get the location hook from the TestComponent component and use it the the TestScreen Component, how can i do that

Answer 1

You should lift state up to parent component

function TestScreen(props) {
  const [location, setLocation] = useState("");
  return (
    <View>
      <TestComponent setLocation={setLocation} location={location}/>
      <Text>{location}</Text>
    </View>
  );
}


function TestComponent({ location, setLocation }) {
  return (
    <View>
      <Text>Boiler</Text>
      <TouchableOpacity>
        <Text onPress={() => setLocation("Me")}>Click</Text>
      </TouchableOpacity>
    </View>
  );
}

And now you have access to location in parent

Answer 2

You can use a function prop for example: onLocationChange :

<TestComponent onLocationChange={(location) => {/*Do what you need with this*/}} />

and call it on the child component like this:

useEffect(() => props.onLocationChange(location)),[location])

Or the easist way, move the location to the parent component, but if you have more then one child component the first aproach should work.

Answer 3

You have declare you data and pass the data as prop to childer componen, parent data could be array, objects, states and so on:

import React from "react";
import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
import TestComponent from "../components/TestComponent";
function TestScreen(props) {
const data = {name: 'im parent data'; otherProperty: 'im other property'}
  return (
    <View>
      <TestComponent />
    PASS DATA AS PROP
      <Text data={data}>{location}</Text>
    </View>
  );
}

export default TestScreen;

Acces to parent data with dot notation:

import React from "react";
import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
function TestComponent(props) {
  const [location, setLocation] = useState("");
  return (
    <View>
      <Text>Boiler</Text>
      <TouchableOpacity>
        <Text onPress={() => setLocation("Me")}>Click</Text>
      <h1>{props.data.name}</h1>
      <h1>{props.data.otherProperty}</h1>
      </TouchableOpacity>
    </View>
  );
}

export default TestComponent;