react router pass object as parameter code example
Example 1: react native passing parameters to routes
Copy
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => {
navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
});
}}
/>
</View>
);
}
function DetailsScreen({ route, navigation }) {
const { itemId } = route.params;
const { otherParam } = route.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>
<Button
title="Go to Details... again"
onPress={() =>
navigation.push('Details', {
itemId: Math.floor(Math.random() * 100),
})
}
/>
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
Example 2: react pass prop to parent
import React, { useState, Component } from 'react';
import Input from '../../shared/input-box/InputBox'
const Form = function (props) {
const [value, setValue] = useState('');
const onchange = (data) => {
setValue(data)
console.log("Form>", data);
}
return (
<div>
<Input data={value} onchange={(e) => { onchange(e) }}/>
</div>
);
}
export default Form;
import React from 'react';
const Input = function (props) {
console.log("Props in Input :", props);
const handleChange = event => {
props.onchange(event.target.value);
}
return (
<div>
<input placeholder="name"
id="name"
onChange= {handleChange}
/>
</div>
);
}
export default Input;