Trouble with custom react component - react-native

Question

Having a go at making my first react native component. I am trying to build a component that reverses the strings passed to it. It works perfectly fine when I give it a hard coded string, but it dosen't seem to do anything when I pass it a string from a "TextInput" component.
Here is what I think are the relevant bit of code.
class ReverseText extends Component {
constructor(props) {
super(props);
this.state = {text: props.src};
}
reverseString = (str) =>{
let newString = "";
for (let i = str.length - 1; i >= 0; i--) {
newString += str[i];
}
return newString;
};
render() {
let display = this.reverseString(this.state.text);
return (
<Text>{display}</Text>
);
}
}
export default class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
render() {
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Type here to translate2!"
onChangeText={(text) => this.setState({text})}/>
<Text style={{padding: 10, fontSize: 42}}>
{/*{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}*/}
{this.state.text} /* this works */
</Text>
<ReverseText src="123" /> /* this works */
<ReverseText src={this.state.text} /> /* this dosen't works */
</View>
);
}
}
Why does the component work when I pass it a hard coded string, but fails when I pass it a string that I get from the TextInput?

Answer 1

The class ReverseText are just setting the state at first time receive the this.props.src. So, when you change the this.props, nothing happen.
To fix you could do this:
export default class ReverseText extends Component{
constructor(props) {
super(props);
this.state = {reverseText: ''};
}
componentWillReceiveProps(nextProps){
this.setState({reverseText: this.reverseString(nextProps.src)})
}
reverseString = (str) =>{
let newString = "";
for (let i = str.length - 1; i >= 0; i--) {
newString += str[i];
}
return newString;
};
render() {
return (
<Text>{this.state.reverseText}</Text>
);
}
}