Pass value from one tab to another tab in ReactJs

Question

I am working on ReactJS and was wondering on how can I pass value between tabs.

Below is the component I am working on. I have three tab and want to pass the card from one tab to another on clicking accept button.

import React, { Component } from 'react'
import DriverPlacedOrder from './DriverPlacedOrder';
import {Link }from 'react-router-dom';
import {Tabs,Tab} from 'react-bootstrap';

export default class Driver extends Component {

  constructor(props, context) {
    super(props, context);
    this.state = {
      key: 'home',
    };
  }
  render() {
    return (
      <Tabs
        id="controlled-tab-example"
        activeKey={this.state.key}
        onSelect={key => this.setState({ key })}
      >
        <Tab eventKey="newOrder" title="New Order">

         <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>
                        <Button variant="outline-success"onClick={} style={{width:'33%'}}><i class="fas fa-check-circle fa-lg"></i><br/>Accept</Button>
                        <Button variant="outline-primary" style={{width:'33%'}}><i class="fas fa-book-open fa-lg" fa-lg></i><br/>View</Button>

                    </div>
                </div>
            </div>

        </Tab>
        <Tab eventKey="currentOrder" title="Current Order">

        </Tab>
        <Tab eventKey="orderHistory" title="OrderHistory">

        </Tab>
      </Tabs>
    );
  }
}

Onclicking accept button how can I pass card from NewOrder tab to currentOrder tab?

Answer 1

I am working on ReactJS and was wondering on how can I pass value between tabs.

<Tab my_data={my_data_value} eventKey="orderHistory" title="OrderHistory">
</Tab>

Answer 2

If I understand your question correctly, you want to re-use the card markup for each tab, and also allow navigation between tabs via that same card markup.

One way to achieve that would be to define a method such as renderCard() that renders that common markup. You'd then call that method when rendering the contents of each <Tab> component. Something to keep in mind also is that renderCard() may need a parameter to specify which tab the "Accept" button navigates to:

export default class Driver extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = { key: 'newOrder' };
    }

    /* Define render card function. Takes nextKey parameter that controls what tab the Accept button will navigate to */
    renderCard(nextKey) {
        return (<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>
                <Button variant="outline-success"onClick={ () => {
                this.setState({ key : nextKey })
                }} style={{width:'33%'}}><i class="fas fa-check-circle fa-lg"></i><br/>Accept</Button>
                <Button variant="outline-primary" style={{width:'33%'}}><i class="fas fa-book-open fa-lg" fa-lg></i><br/>View</Button>
            </div>
        </div>)
    }

    render() {
        return (
            <Tabs
            id="controlled-tab-example"
            activeKey={this.state.key}
            onSelect={key => this.setState({ key })}>
            <Tab eventKey="newOrder" title="New Order">
                <div class="container">
                { /* Render card, and specify which tab the card's accept button will navigate to */ }
                { this.renderCard('currentOrder') }
                </div>
            </Tab>
            <Tab eventKey="currentOrder" title="Current Order">
                <div class="container">
                { /* Render card if this tab visible */ }
                { this.renderCard('orderHistory') }
                </div>
            </Tab>
            <Tab eventKey="orderHistory" title="OrderHistory">
                <div class="container">
                { /* Render card if this tab visible */ }
                { this.renderCard('newOrder') }
                </div>
            </Tab>
            </Tabs>
        );
    }
}