How to change the state of the parent component by the child component?

Question

I have a modal (child) component that I want to display information by clicking on the parent component object.

Son:

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>
    )
  }
}

Father:

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>
        )
    }
}

By clicking on the parent component item I can display the modal, but by clicking the Exit button it says which function modalVisible is undefined.

I am learning React and I understand that this is happening because it is not possible to change the state of the parent component, but how can I solve this?

Answer 1

From what I saw of your code, the "modalVisible" is a property of the state of the parent component. One way to change it from the child component would be to pass the "showModal" function of the parent component as props to the modal component. It would be something like that:

<MeuComponente exibir={this.state.modalVisible} executar={this.showModal.bind(this)} />

The "Variable" will receive a function within the props "run" and the current value of the state "modalVisible" within the props display

Inside the modal, to run, you would do so:

<Modal
          animationType="slide"
          transparent={false}
          visible={this.props.exibir}
          onRequestClose={() => {
            this.props.executar(!this.props.exibir);
        }}>
        <Text>Estou Funcionando!</Text>
        <Button
            color = "#b0bec5"
              title="Sair"
              onPress={() => {
                this.props.executar(!this.props.exibir);
              }}
            />
      </Modal>