Reactで3つのコンポーネントをstateとpropsで行き来する書き方

これから書くこと

• 親のコンポーネントと2つの子のコンポーネントをpropsとstateを使って行き来する
• 子のコンポーネント1つはFormタグで住所を入力するUI
• 子のコンポーネント1つはそのFormに入力した値を元にGoogleMapを表示するUI

※React初心者なので間違っている書き方もしれません。
ご指摘くださいますとうれしいです。

なぜ投稿しようと思ったのか

• 自分の備忘録のため
• 1つのコンポーネントにform系とその入力した値を表示させる参考サイトはたくさんあるが、それらを切り離した参考サイトがなかったので

環境

• React
• es6
• Meteor(フレームワーク)
• jsxに記述

親のコンポーネント

• 入力された値を取得する
• その入力された値をGoogleMapに返す

Parent.jsx

import React, { Component, PropTypes } from 'react';
import InputForm from './InputForm.jsx';
import GoogleMap from './GoogleMap.jsx';

export default class Parent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      inputText: '',
    };
    this.textChange = this.textChange.bind(this);
  }

  textChange(text) {
    this.setState({ inputText: text });
  }

  render() {
    return (
      <div className="google_map">
        <InputForm onChangeAddress={this.textChange} />
        <GoogleMap address={this.state.inputText} />
      </div>
    )
  }
}

子コンポーネント（Form）

• 入力した値を親のコンポーネント「Parent」に返す(propsに返す)
• 入力する値をstateで監視

InputForm.jsx

import React, { Component } from 'react';

export default class InputForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
    };
  }

  render() {
    return(
      <div>
        <input type="text" id="address" value={this.state.text} onChange={e => this.setState({ text: e.target.value })} />
        <button onClick={() => this.props.onChangeAddress(this.state.text)}>表示</button>
      </div>
    )
  }
}

子のコンポーネント(GogoleMap表示)

• 親の「Parent.jsx」から入力した値をpropsとして受け取る
• その値によってGoogleMapの表示が変わる

GoogleMap.jsx

import React, { Component, PropTypes } from 'react';

export default class GoogleMap extends Component {

  constructor(props) {
    super(props);
  }

  // フォームに入力した地域をMapに表示
  addressClick() {
    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'address': this.props.address
    }, (result, status) => {
      if (status === google.maps.GeocoderStatus.OK) {
        map.panTo(result[0].geometry.location);
        const marker = new google.maps.Marker({
          position: result[0].geometry.location,
          map: map
        });
      } else {
        console.log('エラーです。')
      }
    });
  }

  componentDidMount() {
    const latlng = new google.maps.LatLng(35.66, 139.69);
    const options = {
      zoom: 15,
      center: latlng,
      mapTypeId: 'roadmap'
    };
    map = new google.maps.Map(document.getElementById('map'), options);
  }

  render() {
    this.addressClick()
    return (
      <div>
        <div id="map"></div>
      </div>
    )
  }
}