У меня есть компонент Modal) который откр. по клику на определенную кнопку)Так же есть компонент Card по клику на которую теперь нужно открывать его

///Modal.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import Portal from '../Portal/Portal'
import { ImCross } from 'react-icons/im'
import stylesOfModal from './Modal.module.scss'


class Modal extends Component {
     render() {
        return (
            <>
              {
                this.props.isOpen && 
                   <Portal>
                      <div className={stylesOfModal.modalOverlay} onClick={this.props.onCancel}>
                        <div className={stylesOfModal.modalContent} onClick={e => e.stopPropagation()}>
                          <div className={stylesOfModal.modalHeader}>
                            <div>{this.props.header}</div>
                            <ImCross 
                                style={{cursor: "pointer"}} 
                                onClick={this.props.closeBtn}
                            />
                          </div>
                          <div className={stylesOfModal.modalBody}>
                            {this.props.children}
                          </div>
                          <div className={stylesOfModal.modalFooter}>
                            <button 
                              style={{marginRight: '15px', cursor: 'pointer'}} 
                              onClick={this.props.onCancel} invert='true'>
                                {this.props.btnFirstText}
                            </button>
                            <button 
                              style={{cursor: 'pointer'}} 
                              onClick={this.props.onSubmit}>
                                {this.props.btnSecText}
                            </button>
                          </div>
                        </div>  
                     </div>
                 </Portal>
              }     
          </>
        )
    }
}


Modal.propTypes  = {
  closeBtn: PropTypes.func.isRequired,
  isOpen: PropTypes.bool,
  onCancel: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
  header: PropTypes.string,
  btnFirstText: PropTypes.string,
  btnSecText: PropTypes.string
}

export default Modal;

///Card.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import userStyles from "./Card.module.scss"

class Card extends Component {
     render() {
        return (
            <div className={userStyles.card}>
                <div className={userStyles.cardImg}>
                    <img 
                        className={userStyles.imagePhone}
                        src={this.props.phone.image} 
                        alt={this.props.phone.name}
                    />
                </div>
                <div className={userStyles.colorIphone}>
                    {this.props.phone.color}
                </div>
                <div className={userStyles.addToCardContainer}>
                    <span className={userStyles.price}>
                        <strong>
                            {this.props.phone.price}₴
                        </strong>
                    </span>
                    <button className={userStyles.addToCard}> 
                         {this.props.btnAdd} 
                    </button>
                </div>
            </div>
        )
    }
}

Card.ptopTypes = {
    btnAdd: PropTypes.string,
    image: PropTypes.string,
    name: PropTypes.string,
    color: PropTypes.string,
    price: PropTypes.number
}

export default Card;