title: How to make a button click another button from different components in React
body: <p>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.</p>
  
  <p>The Card component: </p>
  
  <pre><code>import React, { Component } from 'react';
  import ModalPage from './modal.jsx'
  
  
  class Card extends Component {
  
      render() {
          return (
              &lt;div&gt;
                  &lt;div className="card m-5" style={{ width: '18rem' }}&gt;
                      &lt;img src={this.props.img} className="card-img-top" /&gt;
                      &lt;div className="card-body"&gt;
                          &lt;h5 className="card-title"&gt;{this.props.title}&lt;/h5&gt;
                          &lt;p className="card-text"&gt;{this.props.desc}&lt;/p&gt;
                          &lt;button onClick={/*I don't know what exactly i should put here */}&gt;&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Card;
  </code></pre>
  
  <p>The modal componant:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';
  
  class ModalPage extends Component {
      state = {
          modal13: false
      }
  
      toggle = nr =&gt; () =&gt; {
          let modalNumber = 'modal' + nr
          this.setState({
              [modalNumber]: !this.state[modalNumber]
          });
      }
  
      render() {
          return (
  
                  &lt;MDBContainer&gt;
  
                      {/* This is the button I want to click when clicking the card's button */}
                      &lt;MDBBtn color="primary" onClick={this.toggle(13)}&gt;
                          Modal
                      &lt;/MDBBtn&gt;
  
  
                      &lt;MDBModal isOpen={this.state.modal13} toggle={this.toggle(13)}&gt;
                          &lt;MDBModalHeader toggle={this.toggle(13)}&gt;
                              {this.props.title}
                          &lt;/MDBModalHeader&gt;
                          &lt;MDBModalBody&gt;
                              {/* edit here */}
                              {this.props.content}
                          &lt;/MDBModalBody&gt;
                          &lt;MDBModalFooter&gt;
                              &lt;MDBBtn color="secondary" onClick={this.toggle(13)}&gt;
                                  Close
                              &lt;/MDBBtn&gt;
                              &lt;MDBBtn color="primary"&gt;Save changes&lt;/MDBBtn&gt;
                          &lt;/MDBModalFooter&gt;
                      &lt;/MDBModal&gt;
                  &lt;/MDBContainer&gt;
  
  
          );
      }
  }
  
  export default ModalPage;
  </code></pre>