console.log is printing data two times [reactjs]
<p>console.log is printing the value two times once it is printing the empty array and in the other value it is printing the value obtained from the ajax call.</p>

<p>With the value given below it printing like '[]' and ["answered"]</p>

<p>I don't know where it is getting initialised where i am putting a debugger on it it is stopping only once over there just for printing the ajax data value</p>

<blockquote>
  <p>{
  "status": 1,
  "value": 4,
  "data": {
  "answer_text": "answered"
     }
  }</p>
</blockquote>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class Discuss extends React.Component {
  constructor() {
    super();
    this.state = {
      discussions: []
    };
  }
  componentWillMount() {
    this._getData();
  }
  _getAnswerText() {
    return this.state.discussions.map(discussion =&gt; discussion.answer_text);
  };

  render() {
    const comments = this._getComments();
    return ( &lt;div&gt; {comments} &lt;ActionBar answer_text={this._getAnswerText()}/&gt;&lt;/div &gt; );
  });
}

_getData() {
  $.ajax({
    method: 'GET',
    url: '/someurl'
    success: (discussions) =&gt; {
      var array = [];
      array.push(discussions);
      var dis = []
      dis.push(array[0].data)
      this.setState({
        discussions: dis
      });
    }
  });
}
}

class ActionBar extends React.Component {
    constructor(props) {
      super(props);
    };
    render() {
        console.log(this.props.answer_text)
        return ( &lt;div&gt; {this.props.answer_text} &lt;/div&gt;)
 };

}

ReactDOM.render(&lt;Discuss/&gt;,document.getElementById('content'));</code></pre>
</div>
</div>
</p>