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

Question

У меня есть страница на реагирующем языке, там будет шесть выпадающих меню и слайдер. Значения пяти раскрывающихся списков и диапазон ползунка зависят от значения первого раскрывающегося списка.

Существует шесть возможных значений для этого первого раскрывающегося списка, для каждого из которых мне нужно сохранить возможные значения в пяти других раскрывающихся списках и диапазон для ползунка.

У меня есть пример страницы, работающей с одним раскрывающимся списком, но я боюсь, что страница станет очень сложной. Я хотел бы иметь возможность «разделить» каждую из шести возможностей на отдельный «класс»

Какой мой лучший путь вперед для этого?

Код (как он есть) доступен здесь (только два раскрывающихся списка)

https://github.com/fo-am/iCrapAppPro/blob/4ddbbd62cd4724fc5548ec87911614747b3eb314/src/Calculator.js

import React, { Component } from "react";
import {
  Text,
  View,
  Dimensions,
  StatusBar,
  TouchableOpacity,
  Picker
} from "react-native";
import Styles from "./styles/style";
import data from "../data/manure.json";

export default class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = {
      soilType: null,
      manureSelected: null,
      applicationSelected: null,
      applicationTypes: {}
    };
  }  

  SelectManure(itemValue) {
    this.setState({ manureSelected: itemValue });
    if (itemValue === "fym") {
      this.setState({
        applicationTypes: {
          "splash-surface": "Splash Surface",
          "splash-incorporated": "Splash Incorporated",
          "shoe-bar-spreader": "Shoe Bar Spreader",
          "shallow-injected": "Shallow Injected"
        }
      });
    } else {
      this.setState({ applicationTypes: {} });
      this.setState({ SelectApplicationType: null });
    }
  }
  SelectApplicationType(itemValue) {
    this.setState({ applicationSelected: itemValue });
  }
  render() {
    var manureTypes = {
      cattle: "Cattle Slurry",
      fym: "Farmyard Manure",
      pig: "Pig Slurry",
      poultry: "Poultry Litter",
      compost: "Compost"
    };
    //  var manureApplicationTypes = {};
    return (
      <View style={Styles.container}>
        <StatusBar />
        <Text syle={Styles.text}>Calculator for crap calculations.</Text>

        <Text>Manure Type</Text>
        <Picker
          selectedValue={this.state.manureSelected}
          style={{ height: 50, width: 200 }}
          onValueChange={item => this.SelectManure(item)}
        >
          {Object.keys(manureTypes).map(key => {
            return (
              <Picker.Item label={manureTypes[key]} value={key} key={key} />
            );
          })}
        </Picker>

        <Text>Application Type</Text>
        <Picker
          selectedValue={this.state.applicationSelected}
          style={{ height: 50, width: 200 }}
          onValueChange={item => this.SelectApplicationType(item)}
        >
          {Object.keys(this.state.applicationTypes).map(key => {
            return (
              <Picker.Item
                label={this.state.applicationTypes[key]}
                value={key}
                key={key}
              />
            );
          })}
        </Picker>           
      </View>
    );
  }
}