I have a functional that has a fetch call to Wordnik Api and it returns one random word. It works all fine, but am trying to set up a TouchbaleOpacity/Button that will render that component onPress so I can get a random word every time the user clicks on the button. I have the other component in a separate file, how do call it on button Press?
`export default function HomeScreen({ navigation }) {
const onPress = () => {
//return component
};
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<TouchableOpacity onPress={onPress}>
<Button title="Next word" />
</TouchableOpacity>
<Wordnik />
</View>
);
}`
Add a props key
on your component and change that key every time on your button's onPress
so component will render every time when key change as following :
export default function HomeScreen({ navigation }) {
const [tempKey, setTempKey] = useState(0);
const onPress = () => {
//return component
setTempKey(tempKey+1);
};
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<TouchableOpacity onPress={onPress}>
<Button title="Next word" />
</TouchableOpacity>
<Wordnik key={tempKey.toString()} />
</View>
);
}