Как использовать один и тот же динамический c выпадающий компонент, чтобы выбрать два раза?

Question

Без использования других зависимостей + пакетов , я пытаюсь выяснить:

1. Как дважды использовать один и тот же компонент без повторного его жесткого кодирования в возвращение App.js, как показано ниже

2. с этими двумя раскрывающимися списками, как установить условие, например, если первый раскрывающийся список равен 3:00, пользователь можно только выбрать 4:00 или позже из второго выпадающего списка.

   • Время в военное время для простоты

*** Это было бы здорово не дать ответ прямо, если это возможно. Я действительно хочу решить это самостоятельно, но я не могу найти правильное руководство в Интернете. Большинство поисковых запросов в Google приводят к использованию зависимости, которая делает это за вас. Я хочу лучше понять React, поэтому любые ответы с советами о том, что искать или как подойти к этой проблеме, были бы полезны!

Примечание: я работаю в «песочнице», так что для простоты пользуюсь ключом. Я знаю, что это не лучшая практика, но весь этот код находится в App.js. Это была проблема кодирования, и я был ограничен с файловой системой, поэтому я стараюсь сделать вещи максимально простыми и организованными.

Заранее спасибо !!!

Приложение. js

class App extends Component {
  constructor() {
    super();

    this.state = {
      time: []
    };
  }

  componentDidMount() {
    let timeArr = [];
    for (let i = 0; i < 24; i++) {
      let fullTime = i + ":00";
      timeArr.push(fullTime);
    }

    return this.setState({ time: timeArr });
  }

  render() {
    console.log(this.state.time);
    return (
      <div>
        <Dropdown milTime={this.state.time} />
        <Dropdown milTime={this.state.time} />
      </div>
    );
  }
}

export default App;

Компонент раскрывающегося списка:

const Dropdown = ({ milTime }) => {
  return (
    <div>
      <select>
        {milTime.map(time => (
          <option>{time}</option>
        ))}
      </select>
    </div>
  );
};