I am trying to access an array that is modified from Screen1. How can I get access to this array from Screen2? Is there a way to do this?
Screen1.tsx
function Screen1() {
const getData = () => {
data = [1, 2, 3, 4, 5]
data.filter((i) => i < 3)
return data;
}
return (
<View>
<Text>Returning JSX</Text>
</View>
)
}
Screen2.tsx
const Screen2 = ({ navigation }) => {
const arr = [1, 2] // modified arr from screen 1
return (
{arr.map((i) => (
<Button
onPress={() =>
navigation.navigate("Screen1")
}
/>
))}
)
}
You can do it using passing props from screen1 to screen2
Try this code it's working !
// Screen1
import React, { useState } from "react";
import Screen2 from './Screen2';
function Screen1() {
var [arr, setArr] = useState([1, 2, 3, 4, 5]);
return (
<div>
<Screen2 data={arr} />
</div>
);
}
export default Screen1;
//Screen2
import React, { useState } from "react";
function Screen2(props) {
return (
<div>{props.data}</div>
);
}
export default Screen2
You need to send arr to the Screen2 Component
For example:
Screen1.tsx
function Screen1() {
var [arr, setArr] = useState([]);
data = [1, 2, 3, 4, 5];
setArr(data);
retrun(<Screen2 data = {arr}>)
}
Screen2.tsx
const Screen2 = (props) => {
console.log(props.data);//[1, 2, 3, 4, 5]
retrun(<div></div>);
}