React Native appending Text component inside of another Text Component
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.org/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);
Train
Updated on June 27, 2022Comments
-
Train almost 2 years
I have a text component
<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 Componentif 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>
-
Train over 8 yearsWow thanks, I didn't think the solution would be so simple. Excellent job.