Is it possible to setState on other function tag? - react-native

Question

Here is my code,
This code is working fine use "setState" to set new variable in componentDidMount tag.
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {
name: "peter",
}
}
componentDidMount(){
this.setState({name:"sam"});
}
render(){
return (
<View>
<Text>
{this.state.name}
</Text>
</View>
)
}
}
But I want to create a new function to set it.
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {
name: "peter",
}
}
changename(){
this.setState({name:"sam"});
}
render(){
this.changename();
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
{this.state.name}
</Text>
</View>
)
}
}
It displays
Minified React error #185;
Error
componentDidMount is work,
but it is not working on my own function tag
any idea how to fix it
Thank you very much.

Answer 1

You have put an unconditional state change in render. Because of that your render triggers a state change which triggers a re-render which again triggers a state change - An infinite loop.
You could put some sort of condition on which to trigger a state change for example:
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {name: "peter"}
}
changename(){ this.setState({name:"sam"}); }
render(){
if(this.state.name==='peter')
this.changename();
return (
<View>
<Text>{this.state.name}</Text>
</View>
)
}
}