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
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
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;