Odtnhj

I have this component in my react app. This basically update the state after every second. But The value <p>this.state.time</p> is not changing. I print the value of state it is changing after every second.

import React from 'react'

import './style.css'

class List extends React.Component

 constructor(props)
 super(props)

 this.state = 
 time:420
 
 this.handleCountdown = this.handleCountdown.bind(this)
 

 handleCountdown()
 console.log('4')
 console.log(this.state)
 setInterval(()=>
 this.setState(time:this.state.time-1)
 console.log('here')
 console.log(this.state)
 ,1000)
 

 shouldComponentUpdate(nextProps, nextState)
 console.log('1')
 if(this.props.start != nextProps.start)
 console.log('in')
 if(nextProps.start == false)
 this.setState(time:420)
 console.log('2')
 return true
 
 else if(nextProps.start == true)
 this.handleCountdown()
 console.log('3')
 return true
 
 else
 return false
 
 

 render()
 console.log(this.state) 
 return(
 <div className="test-clock">
 <p>this.state.time</p>
 <p className='test-clock-subheading'>this.props.start=='true'?'Min remaining':'Start sudo contest'</p>
 </div>
 )
 


export default List

It is child component. I import it to parent and then use it.
Can any body tell why DOM is not updating?

this.forceUpdate() will update the DOM. But why this.setState() is not
updating DOM?

You also need to check if your state has changed. Add the following to your shouldComponentUpdate method.

}
else if ( this.state.time !== nextState.time 
 return true;

As mentioned in the documentation:

Use shouldComponentUpdate() to let React know if a component’s output
is not affected by the current change in state or props.