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

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)

question from:https://stackoverflow.com/questions/65857922/react-js-onclick-button-in-one-component-change-effect-in-other-component

Answer 1

Waitting for answers