I have a text ponent

<Text ref="text" style{...}>{this.state.te}</Text>

and I would like to insert and append other <Text></Text>

so when the event fires on a button I want it to insert a new <Text></Text> to look like this

<Text ref="text" style{...}>
   <Text ref="text" style{...}>first</Text>
   <Text ref="text" style{...}>second</Text>
   <Text ref="text" style{...}>third</Text>
</Text>

this is what my event looks like

insertText(){
 this.setState({te: this.state.te + <Text style={...}>{this.refs.newText.props.value}</Text>})

}

when I do this all it renders is "[object object]" inside of the Text Component

if I use

 this.setState({te: <Text style={...}>{this.refs.newText.props.value}</Text>})

it will render the text just fine with a single <Text></Text> element.

any help would be appreciated. Thanks.

Edit:

this.state.te holds te: <Text></Text>

I have a text ponent

<Text ref="text" style{...}>{this.state.te}</Text>

and I would like to insert and append other <Text></Text>

so when the event fires on a button I want it to insert a new <Text></Text> to look like this

<Text ref="text" style{...}>
   <Text ref="text" style{...}>first</Text>
   <Text ref="text" style{...}>second</Text>
   <Text ref="text" style{...}>third</Text>
</Text>

this is what my event looks like

insertText(){
 this.setState({te: this.state.te + <Text style={...}>{this.refs.newText.props.value}</Text>})

}

when I do this all it renders is "[object object]" inside of the Text Component

if I use

 this.setState({te: <Text style={...}>{this.refs.newText.props.value}</Text>})

it will render the text just fine with a single <Text></Text> element.

any help would be appreciated. Thanks.

Edit:

this.state.te holds te: <Text></Text>

• javascript
• ios
• react-native

• Can you show what this.state.te holds? Thanks. – Nader Dabit Commented Dec 4, 2015 at 15:23
• I have edited my post. thanks – Train Commented Dec 4, 2015 at 15:29
• I have also tried this.refs.text.pops.children.__proto__.push(<Text>new node</Text>); but that does not add any children. same result adds "[object object]... + [object object]" to the first element inside of the array – Train Commented Dec 4, 2015 at 15:40
• @AKADER What can be done, if i want to append TextInput instead of Text ? – Satan Pandeya Commented Sep 19, 2016 at 7:10
• @SatanPandeya Have you tried the accepted answers code with TextInput instead? My guess is the same thing would happen. I can't actually try it out my new mac isn't set up yet I just bought it. – Train Commented Sep 20, 2016 at 2:45

1 Answer 1

Ok, check out what I have below. I've essentially created an array of text values that are place in between two <Text> fields, and when the insertText function is called, it pushes a new text element to the array, then resets the state of the array to the te property:

  getInitialState: function() {
        return {
         te: [<Text>Yo</Text>],
         index:1
        }
  },

  insertText: function() {
    this.state.te.push(
        <Text>Text number {this.state.index}</Text>
    )
    this.setState({
        index: this.state.index + 1,
        te: this.state.te
    })
  },

  render: function() {

    var MyText = function(t) {
      return(
        <Text>
          {t}
        </Text>
      )           
    }

    return (
      <View style={styles.container}>
            {MyText(this.state.te)}
        <TouchableHighlight onPress={ () => this.insertText() } style={{ marginTop:20, height:60, flexDirection: 'row', backgroundColor: '#ededed', justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 22 }}>Add Text</Text>
        </TouchableHighlight>
      </View>
    );

I've set up the full working project here. Full code is also posted below.

https://rnplay/apps/Itk6RQ

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var SampleApp = React.createClass({

  getInitialState: function() {
        return {
       te: [<Text>Yo</Text>],
         index:1
    }
  },

  insertText: function() {
    this.state.te.push(
        <Text>Text number {this.state.index}</Text>
    )
    this.setState({
        index: this.state.index + 1,
      te: this.state.te
    })
  },

  render: function() {

    var MyText = function(t) {
      return(
        <Text>
          {t}
        </Text>
      )           
    }

    return (
      <View style={styles.container}>
            {MyText(this.state.te)}
        <TouchableHighlight onPress={ () => this.insertText() } style={{ marginTop:20, height:60, flexDirection: 'row', backgroundColor: '#ededed', justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 22 }}>Add Text</Text>
        </TouchableHighlight>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 60
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);