How can I pass entire card to another component on onClick button in ReactJS?

Question

I have two component Owner and Order. I have a card with a click button "Accept" on it in Owner Component. How can I make pass entire card to Order component on clicking the accept button. I want same card to appear to in Order component. I am using reactJs.

Below is part of Owner component, which has a card

import React, { Component } from 'react'



export default class Owner extends Component{

    constructor(props) {
        super(props);
    } 

    render(){

        let { OrderID,CID,DeliveryEst,DeliveryInstructions,DriverID,Orders,PrepInsruction,RID,Status,Total } = this.props.indOrder;

        return(

            <div class="container">
                <div class="card" style={{width:'100%',borderRadius:'2%', border: '4px solid lightgreen'}}>
                    <div class="card-body" style={{textAlign:'center'}}>
                        <h4 class="card-title">{CID}</h4>
                        <p class="card-text"><h5>{RID}</h5></p>
                        {/* <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> */}

                        <button type="button" onClick={() => {this.props.removeOrder(OrderID);this.props.showOrder(OrderID)}}class="btn btn-success btn-sm" style={{width:'50%'}}>Accept</button> 


                        <button type="button" class="btn btn-danger btn-sm" style={{width:'50%'}}>Decline</button>
                    </div>
                </div>
            </div>
        )
    }
}

And this is the Order component where I want to display the card when I press accept button.

export default class Order extends Component {
  render() {

    return (


    )
  }
}

Answer 1

If I understand your question, you can pass state from parent to the child using props

Like:

<Card
  stateOfMyCard={() => this.isMyCardOpened()}
  ...otherPropsForExample
/>

isMyCardOpened is a function in your parent component.

In your child component, you get the props, and considering that is a function, you can call it whenever you want.

So, in the onClick event in your "Accept button" you should do this:

onClick={stateOfMyCard} or onClick={this.props.stateOfMyCard}

The second is if you haven't destructured your props

And if I have explained well, you should be display your card in parent and child components because setState is called from child and update state in parent.