Disable Tab Conditionally In React-bootstrap

I'm very new to React. I built this form using react-bootstrap. I want to disable tab 1 when 'Show tab 1' value is No and disable tab 2 when it is unchecked. A default state I defi

Solution 1:

You should set up an onChangeHandler on the select FormControl, where you will update the state, based on the option's value.

import React, { Component } from 'react';
import {
  Row,
  Col,
  FormGroup,
  FormControl,
  ControlLabel,
  Grid,
  Checkbox,
  Tab,
  Tabs
} from 'react-bootstrap';

export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      Tab1: false,
      Tab2: false,
      Tab3: false
    };
  }

  onChangeHandler = e => {
    console.log(e.target.value);
    if (e.target.value === 'no') {
      this.setState({ Tab1: true });
    } else {
      this.setState({ Tab1: false });
    }
  };

  render() {
    return (
      <div>
        <Grid id="grid">
          <Row>
             <Col md={5}>
              <FormGroup controlId="formControlsSelect">
                <ControlLabel>Show tab 1</ControlLabel>
                <FormControl
                  componentClass="select"
                  placeholder="select"
                  onChange={this.onChangeHandler}
                >
                  <option value="yes">Yes</option>
                  <option value="no">No</option>
                </FormControl>
              </FormGroup>
              <br />
              <FormGroup>
                <Checkbox inline>Tab 2</Checkbox>
                <Checkbox inline>Tab 3</Checkbox>
              </FormGroup>
              <Tabs id="tabs" bsStyle="tabs" justified>
                <Tab
                  id="1"
                  eventKey={1}
                  title="Tab 1"
                  disabled={this.state.Tab1}
                >
                  <p>Tab 1</p>
                </Tab>
                <Tab id="2" eventKey={2} title="Tab 2">
                  <p>Tab 2</p>
                </Tab>
                <Tab id="3" eventKey={3} title="Tab 3">
                  <p>Tab 3</p>
                </Tab>
              </Tabs>
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}