tenho um componente de um modal (filho) que quero exibir uma informação ao clicar no objeto do componente pai.
Filho:
import React, {Component} from 'react';
import {Modal, Text, View, Button} from 'react-native';
export default class ModalExample extends Component {
render() {
return (
<View>
<Modal
animationType="slide"
transparent={false}
visible={this.props.modalVisible}
onRequestClose={() => {
showModal(!this.props.modalVisible);
}}>
<Text>Estou Funcionando!</Text>
<Button
color = "#b0bec5"
title="Sair"
onPress={() => {
showModal(!this.props.modalVisible);
}}
/>
</Modal>
</View>
)
}
}
Pai:
import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Modal, Button } from 'react-native';
import ModalDescriptions, { setModalVisible } from './commons/modalDescriptions';
import api from '../service/api';
export default class budgetList extends Component {
constructor(props) {
super(props);
this.state = {
budgetlist: [],
modalVisible: false,
};
}
async componentDidMount(){
await api.get()
.then(res => {this.setState({ budgetlist: res.data })});
}
showModal(visible) {
this.setState({ modalVisible: visible })
}
handleDescription = (i) => {
const data = this.state.budgetlist;
this.setState({ desc: data[i].description });
};
renderItem = ({ item, index }) => (
<View style={styles.card}>
<TouchableOpacity onPress={() => {
this.showModal(true);
this.handleDescription(index);
}}>
<View style={styles.entrace}>
<Text style={styles.customer}>{item.customer}</Text>
<Text style={styles.value}>{item.value}</Text>
</View>
<Text style={styles.seller}>Vendedor: {item.seller}</Text>
</TouchableOpacity>
</View>
);
render() {
return (
<View>
<FlatList
keyExtractor={budgetlist => budgetlist.id.toString()}
data={this.state.budgetlist}
renderItem={this.renderItem}
/>
<ModalDescriptions />
</View>
)
}
}
Ao clicar no item do componente pai eu consigo exibir o modal, porém ao clicar no botão Sair, ele diz que função modalVisible
é undefined
.
Estou aprendendo React e eu entendo que isso está ocorrendo porque não está sendo possível alterar o state do componente pai, porém como posso resolver isso?