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

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

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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;