Как создать форму, в которой выбор одного элемента в раскрывающемся списке влияет на параметры, отображаемые в другом раскрывающемся списке?

Question

Я создаю сайт футбольной статистики в React. js, также использующий bootstrap. Для страницы статистики я хотел бы иметь три выпадающих списка; страна, лига и расписание (вы можете увидеть это более четко на моем каркасе ниже).

Пока у меня есть три раскрывающихся списка формы:

Тем не менее, при выборе страны в раскрывающемся списке лиг отображаются только доступные в этой стране лиги и, в свою очередь, расписание показывать только приспособления доступные из этой лиги. Также, как только все три будут выбраны, прибор, который будет отображаться вместо «КОМАНДА 1 против КОМАНДЫ 2». Я не очень хорошо разбираюсь в JS, поэтому я бы предпочел не использовать его, если это возможно, и придерживаться React?

Это код JS, который у меня имеется для показанного компонента.

import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Form from 'react-bootstrap/Form';
import Col from 'react-bootstrap/Col';

class StatsSection extends React.Component {

  render() {
    return (
      <Container fluid>
        <Row>
          <Col className="col-md-12 d-flex justify-content-center">
            <h11>MAKE YOUR SELECTION</h11>
          </Col>
        </Row>

        <Row>
          <Col className="col-md-12 d-flex justify-content-center">
            <p1>Select a country, league and fixture, then watch the magic unfold...</p1>
          </Col>
        </Row>

        <Row>
          <Form>

              <Col xs={2}>
              </Col>
              <Col xs={2} className="stats-form">
                <Form.Group controlId="exampleForm.ControlSelect1">
                  <Form.Label className="label d-flex justify-content-center">Country</Form.Label>
                  <Form.Control className="form-control" size="lg" as="select">
                    <option>England</option>
                    <option>France</option>
                    <option>Germany</option>
                    <option>Spain</option>
                    <option>Italy</option>
                  </Form.Control>
                </Form.Group>
              </Col>
              <Col xs={2} className="stats-form">
                <Form.Group controlId="exampleForm.ControlSelect2">
                  <Form.Label className="label d-flex justify-content-center">League</Form.Label>
                  <Form.Control className="form-control" size="lg" as="select">
                    <option>Premier League</option>
                    <option>Championship</option>
                    <option>League One</option>
                    <option>League Two</option>
                    <option>Ligue 1</option>
                    <option>Ligue 2</option>
                    <option>Bundesliga</option>
                    <option>2. Bundesliga</option>
                    <option>3. Liga</option>
                    <option>La Liga</option>
                    <option>Segunda División</option>
                    <option>Segunda División B</option>
                    <option>Serie A</option>
                    <option>Serie B</option>
                  </Form.Control>
                </Form.Group>
                </Col>
                <Col xs={2} className="stats-form">
                <Form.Group controlId="exampleForm.ControlSelect3">
                  <Form.Label className="label d-flex justify-content-center">Fixture</Form.Label>
                  <Form.Control className="form-control" size="lg" as="select">
                    <option>Team 1 vs Team 2</option>
                    <option>Team 3 vs Team 4</option>
                    <option>Team 5 vs Team 6</option>
                    <option>Team 7 vs Team 8</option>
                    <option>Team 9 vs Team 10</option>
                    <option>Team 11 vs Team 12</option>
                    <option>Team 13 vs Team 14</option>
                    <option>Team 15 vs Team 16</option>
                    <option>Team 17 vs Team 18</option>
                    <option>Team 19 vs Team 20</option>
                  </Form.Control>
                </Form.Group>
              </Col>
              <Col xs={2}>
              </Col>

          </Form>
        </Row>
      </Container>
    )
  }
}
export default StatsSection;

Также кто-нибудь знает, где я могу найти, как настроить эти выпадающие списки с реагированием bootstrap классы? Если есть такие?