How to make a button click another button from different components in React

Question

I'm new to react and it is kinda hard to understand the one way data flow on it, i was making a simple app and i'm using mdbootstrap for some ready bootstrap components, I imported the component of a modal (which has a button when clicked it toggles a modal) so in my app i have cards, each one has a button that's supposed to toggle the button, but i couldn't figure out how to link the card's button with the mdbootstrap component's button.

The Card component:

import React, { Component } from 'react';
import ModalPage from './modal.jsx'


class Card extends Component {

    render() {
        return (
            <div>
                <div className="card m-5" style={{ width: '18rem' }}>
                    <img src={this.props.img} className="card-img-top" />
                    <div className="card-body">
                        <h5 className="card-title">{this.props.title}</h5>
                        <p className="card-text">{this.props.desc}</p>
                        <button onClick={/*I don't know what exactly i should put here */}></button>
                    </div>
                </div>
            </div>
        )
    }
}

export default Card;

The modal componant:

import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';

class ModalPage extends Component {
    state = {
        modal13: false
    }

    toggle = nr => () => {
        let modalNumber = 'modal' + nr
        this.setState({
            [modalNumber]: !this.state[modalNumber]
        });
    }

    render() {
        return (

                <MDBContainer>

                    {/* This is the button I want to click when clicking the card's button */}
                    <MDBBtn color="primary" onClick={this.toggle(13)}>
                        Modal
                    </MDBBtn>


                    <MDBModal isOpen={this.state.modal13} toggle={this.toggle(13)}>
                        <MDBModalHeader toggle={this.toggle(13)}>
                            {this.props.title}
                        </MDBModalHeader>
                        <MDBModalBody>
                            {/* edit here */}
                            {this.props.content}
                        </MDBModalBody>
                        <MDBModalFooter>
                            <MDBBtn color="secondary" onClick={this.toggle(13)}>
                                Close
                            </MDBBtn>
                            <MDBBtn color="primary">Save changes</MDBBtn>
                        </MDBModalFooter>
                    </MDBModal>
                </MDBContainer>


        );
    }
}

export default ModalPage;

Answer 1

Rather than having 2 click events you only need one on the child component. Instead of trying to send a click to the parent button in order to call toggle() just pass the toggle function to the child to be called:

Card:

import React, { Component } from 'react';
import ModalPage from './modal.jsx'


class Card extends Component {

    render() {
        return (
            <div>
                <div className="card m-5" style={{ width: '18rem' }}>
                    <img src={this.props.img} className="card-img-top" />
                    <div className="card-body">
                        <h5 className="card-title">{this.props.title}</h5>
                        <p className="card-text">{this.props.desc}</p>
                      //*****************************************
                        <button onClick={this.props.click}></button>
                      //*****************************************
                    </div>
                </div>
            </div>
        )
    }
}

export default Card;

Modal:

import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';

class ModalPage extends Component {
    state = {
        modal13: false
    }

    toggle = nr => () => {
        let modalNumber = 'modal' + nr
        this.setState({
            [modalNumber]: !this.state[modalNumber]
        });
    }

    render() {
        return (

                <MDBContainer>

                    {/* I am assuming that this is a reference to <Card /> - simply pass in the onClick function as a parameter.  You can even use onClick here and this.props.onClick in the child element */}
                    <MDBBtn color="primary" click={this.toggle(13)}>
                        Modal
                    </MDBBtn>


                    <MDBModal isOpen={this.state.modal13} toggle={this.toggle(13)}>
                        <MDBModalHeader toggle={this.toggle(13)}>
                            {this.props.title}
                        </MDBModalHeader>
                        <MDBModalBody>
                            {/* edit here */}
                            {this.props.content}
                        </MDBModalBody>
                        <MDBModalFooter>
                            <MDBBtn color="secondary" onClick={this.toggle(13)}>
                                Close
                            </MDBBtn>
                            <MDBBtn color="primary">Save changes</MDBBtn>
                        </MDBModalFooter>
                    </MDBModal>
                </MDBContainer>


        );
    }
}

export default ModalPage;