React JS - как передать данные input из одного компонента в другой

Изучаю реакт и для практики хочу написать небольшое приложение, но никак не могу найти решение для возникшей проблемы: как передать значение input для названия напитка из Drinkname в div Blank

Drinkname:

class Drinkname extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      submit: '',
      glass: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    event.preventDefault()
    this.setState({
      glass: event.target.value
    })
  }

  handleChange(event) {
    event.preventDefault()
    this.setState({
      name: event.target.value
    })
  }

  handleSubmit(event) {
    event.preventDefault()
    this.setState({
      submit: this.state.name
    })
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit} class="form__column">
      <label id="label_0" for="#drinkNameInput">Введите название напитка:</label>
      <input value={this.state.name} onChange={this.handleChange} placeholder="..." type="text" name="drinkName" id="drinkNameInput" />
      <div class="glass__headline">Выберите бокал:</div>
      <div class="glass">
        <button onClick={this.handleClick} value="rocks" title="Рокс" id="rocks" type="button"></button>
        <button onClick={this.handleClick} value="oldFashion" title="Олд Фэшн" id="oldFashion" type="button"></button>
        <button onClick={this.handleClick} value="tulipe" title="Тулип" id="tulipe" type="button"></button>
        <button onClick={this.handleClick} value="wineRed" title="Для красного вина" id="wineRed" type="button"></button>
        <button onClick={this.handleClick} value="wineWhite" title="Для белого вина" id="wineWhite" type="button"></button>
        <button onClick={this.handleClick} value="shot" title="Шот" id="shot" type="button"></button>
        <button onClick={this.handleClick} value="irish" title="Айриш" id="irish" type="button"></button>
        <button onClick={this.handleClick} value="highball" title="Хайбол" id="highball" type="button"></button>
        <button onClick={this.handleClick} value="hurricane" title="Харикейн" id="hurricane" type="button"></button>
      </div>
      <button id="buttonNext" type="submit">Далее</button>
      <h3>{this.state.submit}</h3>
      <h2>{this.state.glass}</h2>
    </form>
    )
  }

};

Blank:

class Blank extends React.Component {
  constructor(props){
    super(props);

  }
  render() {
      return (
    <>
    <div class="header">
    <div class="header__row">
      <div class="orgInfo">
        <div class="org__row">
          <p class="defText">Организация:</p><p class="defText spec">ООО "Бештау" ОП "Отель Бештау"</p>
        </div>
        <div class="predp__row">
          <p class="defText">Предприятие:</p><p class="defText spec">ООО "Бештау" ОП "Отель Бештау"</p>
        </div>
      </div>
      <div class="orgConfirm__column">
        <p class="defText">"УТВЕРЖДАЮ"</p>
        <p class="defText">Руководитель ОП "Отель Бештау"</p>
        <p class="defText">ООО "Бештау" Литвинова П.В.</p>
      </div>
    </div>
  </div>
  <div class="techinfo">
    <div class="techinfo__column">
      <div class="name__column">
        <div class="input__row">
          <label class="label" for="drinkName">Название блюда:</label><div class="drinkInput" type="text">{this.props.submit}</div> 
        </div>
        <div class="input__row">
          <label class="label" for="drinkWeight">Выход в готовом виде:</label><input class="drinkInput" type="text" id="drinkWeight" /> 
        </div>
        <div class="input__row">
          <label class="label" for="drinkCreationDate">Дата составления карты:</label><input class="drinkInput" type="date" id="drinkCreationDate" /> 
        </div>
      </div>
    </div>
    <div class="techtable">
      <div class="tablehead__row">
        <div class="number column">
          <div id="0">№</div>
        </div>
        <div class="name column">
          <div id="name0">Наименование</div>
        </div>
        <div class="measurement column">
          <div id="meas0">Ед. изм.</div>
        </div>
        <div class="brutto column">
          <div id="bru0">Вес брутто</div>
        </div>
        <div class="netto column">
          <div id="net0">Вес нетто</div>
        </div>
        <div class="totalWeight column">
          <div id="tot0">Вес готового продукта</div>
        </div>
        <div class="portionWeight column">
          <div id="por0">Вес нетто на порцию</div>
        </div>
      </div>
    </div>
    <div class="guide">
      <div class="guide__column">
        <div class="guide__headline">Технология приготовления и оформления</div>
        <div class="guide__content">
          <div id="step0">1.</div>
        </div>
      </div>
    </div>
  </div>
  </>
  )
  }

};

Ответы (0 шт):