Display array element ReactJS
<p>UPD: How can I display elment of the array in my component (WeatherCityName - h2)? It can be seen that the array is loaded, but when I point out the property - an error occurs, it may be a problem in the syntax?</p>

<pre><code>  var WeatherBox = React.createClass({
   handleWeatherSubmit: function(text) {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: 'cityName=' + text,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  render: function() {
    return (
      &lt;div className="wetherBox"&gt;
      &lt;h1&gt; Weather&lt;/h1&gt;
      &lt;WeatherForm onWeatherSubmit={this.handleWeatherSubmit} /&gt;
      &lt;WeatherCityName data={this.state.data[0]} /&gt;
      &lt;WeatherList data={this.state.data} /&gt;
      &lt;/div&gt;
      );
  }
});

var WeatherCityName = React.createClass({
    render: function(){
        return(
            &lt;h2&gt;{this.state.data[0].cityName}&lt;/h2&gt;
            );
    }
});
</code></pre>

<p><a href="https://i.stack.imgur.com/UptIx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UptIx.png" alt="Error"></a></p>

<p><a href="https://i.stack.imgur.com/zyD4N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zyD4N.png" alt="React"></a></p>