How do I use the response in an ajax call to set a value in my jsx in react similar to filter/pipes in Angular 2?
<p>I am learning react and wanted to convert one of my angular 2 components to a react component.  I'm running into an issue where in Angular 2 i use a pipe to convert a text variable in the template like below.</p>

<pre><code>&lt;span&gt;{{ message.What | translate}}&lt;/span&gt;
</code></pre>

<p>the translate pipe calls this function from my pipes.ts file</p>

<pre><code>    @Pipe({
        name: "translate",
        pure:false
    })
    export class Translate implements PipeTransform{
        private headers = new Headers();
        private translated: string = null;
        private prevtext = '';

        constructor(private http: Http) {
            this.headers.append('Content-Type', 'application/x-www-form-urlencoded');
        }
        transform(text: string): string {
            if (text !== this.prevtext) {
                this.prevtext = text;
                this.translated = null;
                this.http.post('https://translate.yandex.net/api/v1.5/tr.json/translate?lang=es-en&amp;key=trnsl.1.1.20160702T062231Z.b01e74e50f545073.41cbb76d976818cfaa0e1ac3ac78b561079e3420&amp;text='+text,{},{headers:this.headers}).map((response:Response)=&gt;{
                    return response.json();
                }).subscribe((data)=&gt;{
                    this.translated= data.text[0];
                });
            }
            return this.translated;
        }
}
</code></pre>

<p>now in react i moved my mark up to a js file my render looks like this</p>

<pre><code>render() {
const { props, onScroll } = this;
return (
    &lt;div className="message-content" ref="messageList" onScroll={ onScroll }&gt;
      &lt;ul className="message-list"&gt;
        { props.history.map((messageObj,index) =&gt; {
          const imgURL = '//robohash.org/' + messageObj.Who + '?set=set2&amp;bgset=bg2&amp;size=70x70';
          const messageDate = new Date(messageObj.When);
          const messageText = messageObj.What;
          const messageDateTime = messageDate.toLocaleDateString() +
              ' at ' + messageDate.toLocaleTimeString();
          var classes = 'message-item avatar' ;
          var me = props.userID == messageObj.Who ? ' me':'';

          classes = classes + me;
          return (
              &lt;li className={classes} key={ messageObj.When }&gt;
                &lt;div className="tint"&gt;&lt;img src={ imgURL } alt={ messageObj.Who } className="circle" /&gt;&lt;/div&gt;
                &lt;span className="title"&gt;Anonymous robot #{ messageObj.Who }&lt;/span&gt;
                &lt;p className="message-text"&gt;
                  &lt;span&gt;{props.translate(messageText)}&lt;/span&gt;
                &lt;/p&gt;
                &lt;span className="message-date"&gt;{ messageDateTime }&lt;/span&gt;
              &lt;/li&gt;
          );
        }) }
      &lt;/ul&gt;
    &lt;/div&gt;
);
</code></pre>

<p>}</p>

<p>where props.translate calls</p>

<pre><code>translate = (msg,index) =&gt;{
    const { props } = this;

    $.ajax({
      url:'https://translate.yandex.net/api/v1.5/tr.json/translate?lang=es-en&amp;key=trnsl.1.1.20160702T062231Z.b01e74e50f545073.41cbb76d976818cfaa0e1ac3ac78b561079e3420&amp;text='+msg,
      method:"POST",
      data:JSON.stringify({"input":msg}),
      contentType: 'application/x-www-form-urlencoded',
      crossDomain:true
    }).success((data)=&gt;{
        //set variable to data
    }).error((error)=&gt;{
      console.log(error);
    });
  }


 }
</code></pre>

<p>where I am stuck is that in angular 2 i set the variable in the callback and angular keeps track of the change and updates the value. I am wondering how do i do that in react.  I have seen examples of state changes and stuff but none that shows how to update the value of an object property from an array of objects.
Any help would be appreciated</p>