React state data changing on its own

Question

Hi I'm working on a simple address book app made with ReactJS. There's one boolean key in state called 'show_personal'. By default it is set to false. When it is true then the component will render personal address book.

For some reason this boolean value keeps changing on page reload. I've put some logging statements which shows value of it.

I noticed that almost in a sec when the component gets rendered, its value changes due to which my component get re-rendered and this breaks my app UI.

I'm using proper way to update state using this.setState method. While logging/debug I've disabled every possible function which toggles this value. Still facing this issue

Is there anyway to trace which component of code has changed it's value ?

class Home extends React.Component{
   state = {
   show_personal : false
  }
  render(){
  const checkFlag = ()=>{
  if(this.state.show_personal){
    return <div>Show personal records</div>
   }
  }
  else{
    return <div>Show business records</div>
  }
    return({
      {checkFlag}
   })
  }
}

Answer 1

Hi your render syntax is a little unusual, you return your checkFlag function without calling it, I don't known what that could do...

Maybe you could try it like this to see if it behaves better

class Home extends React.Component{
   state = {
     show_personal : false
   }
   render() {
     return this.state.show_personal ? <div>Show personal records</div> : 
       <div>Show business records</div>
  }
}