React.js onclick button in one component change effect in other component - reactjs

Question

js
I have two buttons in parent component e.g button1 ,button2 ,and
I have two radio button in my child component e.g radio1,radio2 ,and both have class to active yellow
the task i need to do is onclick button1 in the parent component, the radio1 become active class and same on click on button2, radio2 in child become active class
import React ,{Component} from 'react';
import { withStyles } from '#material-ui/core/styles';
import { Radio } from '#material-ui/core';
import "react-datepicker/dist/react-datepicker.css";
import { connect } from 'react-redux';
import "./strip.css";
import * as actions from '../../actions/instruction';
import PaypalPayment from "./PaypalPayment"
import BankPayment from "./BankPayment"
class WidthdrawPayment extends Component {
state={
open: false,
cardId: 0,
}
setButton = (id) => {
this.setState({ cardId: id });
}
handlesChange = ({ id }) => {
//const { cardId } = this.props;
this.setState({ cardId: id });
};
render() {
const { open,cardId } = this.state;
return (
<>
<div className="main">
<div className="container-fluid no-padding">
<div style={{display: 'flex'}} >
<div
className=" lawyer-payment-big-box row">
<div className="col-md-12">
<div
className={cardId === 1 ? "active-div widthdraw-payment-choose-box col-sm-4 col-md-4 col-lg-4" :"widthdraw-payment-choose-box col-sm-4 col-lg-4 col-md-4"}>
<span>
<Radio
style={{color:'#fff'}}
color="primary"
checked={cardId === 1}
onClick={() => this.setButton(1)}
onChange={() => this.handlesChange({ id: 1 })}
name="radio-button-demo"
/>
</span>
<span className="widthdraw-payment-type-font" >Transfer</span>
</div>
<div
className={cardId === 2 ? "active-div widthdraw-payment-choose-box col-sm-4 col-md-4 col-lg-4" :"widthdraw-payment-choose-box col-sm-4 col-md-4 col-lg-4"}>
<span>
<Radio
style={{color:'#fff'}}
className=""
color="primary"
checked={cardId === 2}
onClick={() => this.setButton(2)}
onChange={()=> this.handlesChange({ id: 2 })}
name="radio-button-demo"
/>
</span>
<span className="widthdraw-payment-type-font">Bank Transfer</span>
</div>
<div className="col-md-4"></div>
</div>
{cardId === 0 ?
<div className="row">
<div style={{padding:'30px'}} className="col-md-12">
<p>Please select your payment method first to proceed</p>
</div>
</div>
:
<>
{
cardId ===1 ?
<>
{cardId ===1 &&
<PaypalPayment
{...this.props}
{...this.state}
/>
}
</>
:
<>
{/* <BankPayment
{...this.props}
{...this.state}
/> */}
{cardId ===2 ?
<>
{cardId===2 &&<BankPayment
{...this.props}
{...this.state}
/>
}
</>
:
<>
<div className="row">
<div style={{padding:'30px'}} className="col-md-12">
<p>Please select your payment method first to proceed</p>
</div>
</div>
</>
}
</>
}
</>
}
</div>
</div>
</div>
</div>
</div>
</>
)
}
}
export default WidthdrawPayment
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
import { KeyboardDatePicker, MuiPickersUtilsProvider } from "#material-ui/pickers";
import DateFnsUtils from '#date-io/date-fns';
import {Link,Redirect} from 'react-router-dom';
import { Button, TYPES } from "../../components/atoms/YellowButton";
import { connect } from 'react-redux';
import moment from 'moment';
import * as actions from '../../actions/instruction';
import { EmptyList } from '../../components/molecules/NotFound/EmptyView';
import WidthdrawPayment from '../WidthdrawPayment'
const drawerWidth = 550;
class FirmPaymentStats extends React.Component {
constructor(props) {
super(props);
this.state={
open: false,
buttonId: 1,
cardId: 0,
}
this.superheroElement = React.createRef();
}
handlePaypalPayment = () => {
const {history} = this.props;
this.defaultactivepaypal()
history.push(`/main/dashboardmaster/widthdrawpayment`)
}
handleBankPayment = () => {
const {history} = this.props;
this.defaultActivebank()
history.push(`/main/dashboardmaster/widthdrawpayment`)
}
defaultactivepaypal = () => {
const {cardId} = this.props;
this.setState({ cardId: 1 });
}
defaultActivebank = () => {
const {cardId} = this.props;
this.setState({ cardId: 2 });
}
render() {
const { history,cardId } = this.props;
const { open,cardId } = this.state;
return (
<div className='main'>
<div className='container-fluid no-padding'>
<div className={classes.root}>
<div className="firm-payment-history-box row">
<div className='admin-options-section cases-section row'>
{/* balance bar */}
<div style={{ padding: '0px 30px' }} className="row">
<div class="lawyer-payment-subheading">
<div >
<p className="system-ui-bold-text firm-payment-main-heading" >Your Balance</p>
</div>
<div style={{paddingTop:'25px'}} className="lawyer-payment-subheading-btn-end">
<div className="system-ui-bold-text" style={{fontSize: "18px",padding: '8px 5px 0px 5px' }}>Widthdraw Balance:</div>
<button
className="yellow-button "
// checked={cardId === 1}
style={{display:'inline',marginRight: '10px'}}
onClick={this.handlePaypalPayment}
>
Paypal Account
</button>
<button
// checked={cardId === 2}
onClick={this.handleBankPayment}
className="yellow-button " style={{display:'inline'}}>
<img style={{marginRight:'10px'}}
src={require("../../assets/img/bank.png")} />
Bank Account
</button>
</div>
</div>
<div className='user-con-filter page-extras'>
{/* search bar and calender*/}
{/* table */}
</div>
<div className='pagination-dim'>
</div>
</div>
</div>
</div>
<div
style={{display: 'none'}}
>
<WidthdrawPayment
{...this.state}
{...this.props}
handlePaypalPayment={this.handlePaypalPayment}
handleBankPayment={this.handleBankPayment}
handleChange={ this.handlepaymenttypeChange}
/>
</div>
</div>
);
}
}
const wrappedFirmPaymentStats = withStyles(styles, { withTheme: true })(FirmPaymentStats);
const mapStateToProps = ({ instruction }) => ({
...instruction
});
export default connect(mapStateToProps, actions)(wrappedFirmPaymentStats)