Quiero pasarle data a las instancias de map y view pero estas son llamadas en el lifecycle hook componentDidMount() y parece que solo corre una vez y no registra cuando se le pasa data.

EsriMapComponent.js

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { loadModules } from 'esri-loader';
import s from './EsriMap.css';

class EsriMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: '',
    };
  }

  esriLoad(data) {
    loadModules([
      'esri/Map',
      'esri/views/SceneView',
      'esri/layers/SceneLayer',
      'esri/layers/WebTileLayer',
      'esri/config',
    ])
      .then(([Map, SceneView, SceneLayer, WebTileLayer, esriConfig]) => {
        // create map with the given options at a DOM node w/ id 'mapNode'
        const map = new Map({});

        // Create the SceneView
        const view = new SceneView({
          container: this.mapNode,
          map,
          qualityProfile: 'high',
          camera: {
            heading: 120, // face due east
            position: {
              x: -73.978645,
              y: 40.749717,
              z: 70000,
            },
            fov: 15,
          },
          highlightOptions: {
            color: [255, 255, 255],
            fillOpacity: 0.25,
          },
        });

        esriConfig.request.corsEnabledServers.push(
          'url',
        );
        // Load mapbox basemap layer
        const webTileLayer = new WebTileLayer({
          urlTemplate:
            'url'
        });

        // New development brooklyn buildings layer
        const buildings = new SceneLayer({
          url:
            'url',
        });

        // Add newDev and mapbox basemap layers to map
        map.addMany([buildings, webTileLayer]);
      })
      .catch(err => {
        // handle any script or module loading errors
        console.error(err);
      });
  }

  componentWillReceiveProps(newProps) {
    const component = this;
    component.setState({
      data: newProps.data,
    });
  }

  componentDidMount() {
    this.esriLoad();
  }

  render() {
    console.log(this.state.data);

    return (
      <div
        ref={c => {
          this.mapNode = c;
        }}
        className={s.root}
      />
    );
  }
}

export default withStyles(s)(EsriMap);

MapComponent.js

import React from 'react';
import PropTypes from 'prop-types';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Map.css';
import EsriMap from '../../components/EsriMap';
import EsriMapComponent from '../../components/EsriMapComponent';
import Navigation from '../../components/Navigation';
import BootstrapTableComponent from '../../components/BootstrapTableComponent';
import FetchGeoClient from '../../components/FetchGeoClient';
import AddressPanel from '../../components/AddressPanel';

class Map extends React.Component {
  constructor(props) {
    super();
    this.state = {
      search: '',
      data: '',
    };
  }

  submitSearch(event) {
    event.preventDefault();

    this.setState({
      search: '',
    });

    const data = new FormData(event.target);

    const searchInput = data.get('searchInput');

    const url = `url`;

    this.setState({
      search: url,
    });
  }

  addGeoClientDataToState(response) {
    this.setState({
      data: response,
    });
  }

  getGeoClient() {
    if (this.state.search != '') {
      return (
        <FetchGeoClient
          url={this.state.search}
          returnData={this.addGeoClientDataToState.bind(this)}
        />
      );
    }
  }

  renderEsriMap() {
    if (this.state.data != '') {
      return <EsriMap data={this.state.data} />;
    }
    return <EsriMap test="Hey" />;
  }

  renderTableComponent() {
    if (this.state.data != '') {
      return <BootstrapTableComponent data={this.state.data} />;
    }
    return <BootstrapTableComponent />;
  }

  renderAddressPanel() {
    if (this.state.data != '') {
      return <AddressPanel data={this.state.data} titleCase={this.titleCase} />;
    }
    return <AddressPanel />;
  }

  //This function processes address strings so they're properly cased format
  titleCase(str) {
    let splitStr = str.toLowerCase().split(' ');
    for (var i = 0; i < splitStr.length; i++) {
     splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);
    }
    // Directly return the joined string
    return splitStr.join(' ');
  }

  render() {
    return (
      <div className={s.root}>
        <div className={s.container}>
          <div>{this.renderEsriMap()}</div>
          <div className={s.toolsDiv}>
            <Navigation submit={this.submitSearch.bind(this)} />
            {this.renderAddressPanel()}
            {this.renderTableComponent()}
          </div>
        </div>
        {this.getGeoClient()}
      </div>
    );
  }
}

export default withStyles(s)(Map);

NavigationComponent.js

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Navigation2.css';

class Navigation extends React.Component {
  constructor(props) {
    super();
    this.state = {
      search: '',
    };
  }

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

  render() {
    return (
      <div className={s.root}>
        <nav
          className={`${s.marginTop} ${s.navbar} ${
            s.navbarDefault
          } navbar navbar-default`}
        >
          <div className="container-fluid">
            <div className="navbar-left">
              <span
                className={`${s.glyphicon} ${
                  s.glyphiconMenuHamburger
                } glyphicon glyphicon-menu-hamburger`}
              />
            </div>
            <ul className="nav navbar-nav navbar-right calcite-navbar calcite-text-light calcite-bg-dark">
              <div className="calcite-navbar-search">
                <div className="esri-search esri-widget" id="searchContainer">
                  <div className="esri-search__container" role="presentation">
                    <div className="esri-search__input-container">
                      <form
                        className="esri-search__form"
                        id="addressForm"
                        role="search"
                        onSubmit={this.props.submit}
                      >
                        <input
                          value={this.state.search}
                          onChange={this.updateSearch.bind(this)}
                          type="text"
                          id="searchInput"
                          className="esri-search__input"
                          placeholder="142 Roebling Street, Brooklyn"
                          name="searchInput"
                        />

                        <button
                          id="searchButton"
                          className={`${
                            s.esriWidgetButton
                          } esri-search__submit-button esri-widget-button`}
                          role="button"
                          title="Search"
                          tabIndex="0"
                          type="submit"
                        >
                          <span
                            aria-hidden="true"
                            role="presentation"
                            className="esri-icon-search"
                          />
                        </button>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}

export default withStyles(s)(Navigation);