Связать вход с выходом в React

Question

Я новичок в React, и я бы попытался немного повозиться с потоком данных при использовании и каким-то выводом.

Идея состоит в том, чтобы напечатать что-нибудь в строке ввода и показать ее под панелью, когда пользователь печатает. Я хочу сделать это без таких вещей, как Flux или Redux, пожалуйста. Просто небольшая вещь, чтобы познакомить меня с потоком данных.

У меня есть компонент ввода

class Input extends Component {
  render() {
    return (
      <input value={this.props.inputValue} onChange={this.props.onChange} />
    );
  }
}

И компонент вывода

class Output extends Component {
  render() {
    return (
      <p>
        {this.props.dataSource}
      </p>
    );
  }
}

Инкапсулирован в родительский компонент, который просто приложение

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(event) {
    this.setState({
      value: event.target.value,
    });
  }

  render() {
    return (
      <div>
        <Input inputValue={this.state.value} onChange={this.onChange} />
        <Output dataSource={this.state.value} />
      </div>
    );
  }
}

Но компонент Output, похоже, не читает value от родительского компонента. Также я сомневаюсь, что это даже правильный путь. Хранение данных в родительском компоненте вместо отдельных компонентов.