Get value of input from inner component with reactjs

I'm trying to get the value of the inner input element but every time I got this error:

Uncaught TypeError: this.containerInput.gatValue is not a function

What am

class Input extends Component {
    getValue() {
    return this.textInput.value;
  }
  render() {
    return (
      <input type="text" ref={(input) => this.textInput = input} />
    );
  }
}

class Container extends Component {
    getValue() {
    return this.containerInput.gatValue();
  }
  render() {
    return (
      <Input ref={(input) => this.containerInput = input} />
    );
  }
}

class View extends Component {
    constructor(props) {
    super(props);
    this.buttonClick = this.buttonClick.bind(this);
    }
    buttonClick(e) {
    console.log(this.viewInput.getValue());
  }
  render() {
    return (
      <div>
        <Container ref={(input) => this.viewInput = input} />
        <button onClick={this.buttonClick}>Get Value</button>
        <span></span>
      </div>
    );
  }
}

ReactDOM.render(
  <View />,
  document.getElementById('root')
);

DEMO