Show component when clicking the button React Native - react-native

Question

in the file popUpDialog.Js
export default class DialogTester extends Component {
constructor(props) {
super(props)
this.state = {
dialogVisible: false
};
}
showDialog = () => {
this.setState({ dialogVisible: true });
};
handleCancel = () => {
this.setState({ dialogVisible: false });
};
handleRedefinir = () => {
this.setState({ dialogVisible: false });
};
handleEmail = (email) => {
console.log(email);
}
render() {
const {dialogVisible} = this.state;
return (
<View>
<Dialog.Container visible={this.state.dialogVisible}>
<Dialog.Title>Redefinir Senha</Dialog.Title>
<Dialog.Description>
Digite seu e-mail cadastrado
</Dialog.Description>
<Dialog.Input placeholder="E-mail" onChangeText={(email) => this.handleEmail(email)}
></Dialog.Input>
<Dialog.Button label="Cancelar" onPress={this.handleCancel} />
<Dialog.Button label="Redefinir" onPress={this.handleRedefinir} />
</Dialog.Container>
</View>
);
}
}
so far all right
in the file Index.js
import React, { Component } from "react";
import {
View,
TextInput,
Text,
TouchableOpacity,
SafeAreaView,
StatusBar,
} from "react-native";
import styles from "./styles";
import PopUp from "../Login/popUpDialog";
export default class Login extends Component {
render() {
return (
<SafeAreaView>
<TouchableOpacity
onPress={() => <PopUp dialogVisible = true /> } //It does not work
style={styles.redefinirButton}
>
<Text style={styles.textRedefinirButton}>Redefinir Senha</Text>
</TouchableOpacity>
</SafeAreaView>
);
}
}
How do I make dialogVisible = true when I press it?
I try props and setState don't work
Everything else works, if I try to put out of onPress and leave the variable as true as default it shows, but when I leave it false and try to pass true when I press the button I can't do it in any way.

Answer 1

You need to keep the state of the visibility in the parent component (Login) and pass it as a prop to the Popup component. Then, in the Popup component just use props.dialogVisible where you need it