title: React Native appending Text component inside of another Text Component
body: <p>I have a text component</p>
  
  <pre><code>&lt;Text ref="text" style{...}&gt;{this.state.te}&lt;/Text&gt;
  </code></pre>
  
  <p>and I would like to insert and append other <code>&lt;Text&gt;&lt;/Text&gt;</code></p>
  
  <p>so when the event fires on a button I want it to insert a new <code>&lt;Text&gt;&lt;/Text&gt;</code> to look like this</p>
  
  <pre><code>&lt;Text ref="text" style{...}&gt;
     &lt;Text ref="text" style{...}&gt;first&lt;/Text&gt;
     &lt;Text ref="text" style{...}&gt;second&lt;/Text&gt;
     &lt;Text ref="text" style{...}&gt;third&lt;/Text&gt;
  &lt;/Text&gt;
  </code></pre>
  
  <p>this is what my event looks like</p>
  
  <pre><code>insertText(){
   this.setState({te: this.state.te + &lt;Text style={...}&gt;{this.refs.newText.props.value}&lt;/Text&gt;})
  </code></pre>
  
  <p>}</p>
  
  <p>when I do this all it renders is <code>"[object object]"</code> inside of the Text Component</p>
  
  <p>if I use </p>
  
  <pre><code> this.setState({te: &lt;Text style={...}&gt;{this.refs.newText.props.value}&lt;/Text&gt;})
  </code></pre>
  
  <p>it will render the text just fine with a single <code>&lt;Text&gt;&lt;/Text&gt;</code> element.</p>
  
  <p>any help would be appreciated. Thanks.</p>
  
  <p>Edit:</p>
  
  <p>this.state.te holds <code>te: &lt;Text&gt;&lt;/Text&gt;</code></p>