CODEWITHSUNDEEP
javascriptreactjsreact-native
Vasilii Vakhton
Vasilii Vakhton

Reputation: 31

Why my child components does not re-render on parent's state change?

I'm building a Pomodoro Clock time with React and stumbled upon a problem. My Child component's (BreakCounter) props do not update when parent's (App) state is updating. I'm trying to pass it as props to child but it doesn't change. Why? How can I make my child component props update with my parent's state?

HTML:

<div id="root"> </div>

JS:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breakCounter: 5,
      sessionCounter: 27,
      mainTimerMins: 27,
      mainTimerSecs: 0
    };
  }

  reset = () => {
    this.setState = ({
      breakCounter: this.state.breakCounter = 5,
      sessionCounter: this.state.sessionCounter = 25,
      mainTimerMins: this.state.mainTimerMins = 25,
      mainTimerSecs: this.state.mainTimerSecs = 0
    });
  console.log(this.state);
  }

  breakCounterIncrement = () => {
    this.setState = ({
      breakCounter: this.state.breakCounter++
    })
    console.log('Parent State ' + this.state.breakCounter); 
    //parent's state is updating
  }
 breakCounterDecrement = () => {
   this.setState = ({
      breakCounter: this.state.breakCounter--
    })
    console.log('Parent State '+this.state.breakCounter)
 }


  render() {
    return (
      <div>
        <h1>Pomodoro Clock</h1>
        <BreakCounter inc={this.breakCounterIncrement} dec={this.breakCounterDecrement}  {...this.state}/>
        <SessionCounter session= {this.state.sessionCounter} />
        <MainTimer reset = {this.reset} mins={this.state.mainTimerMins} secs = {this.state.mainTimerSecs} />
      </div>
    );
  }
}

class BreakCounter extends React.Component {


  increment = () => {
    this.props.inc(true);
   console.log(this.props.breakCounter) //child props doesn't update
  }

  decrement = () => {
     this.props.dec(true);
    console.log('Child state ' +this.state.breakCounter)
  }

  render() {
    return (
      <div>
        <h1 id="break-label">Break Length</h1>
      <button id='break-increment' onClick={this.increment}><span>&#8593;</span></button>
        <div id='break-length' key={this.props.breakCounter}>{this.props.breakCounter}</div>
        <button id='break-decrement' onClick={this.decrement}><span>&#8595;</span></button>
      </div>
    );
  }
}

class SessionCounter extends React.Component {
  render() {
    return (
      <div>
        <h1 id="session-label">Session length</h1>
        <button id='session-increment'><span>&#8593;</span></button>
        <div id='session-length'>{this.props.session}</div>
        <button id='session-decrement'><span>&#8595;</span></button>
      </div>
    );
  }
}

class MainTimer extends React.Component {
  reset = () => {
    this.props.reset(true);
  }

  render() {
    return (
      <div>
        <h1 id="timer-label">Timer</h1>
        <div id="time-left">{this.props.mins}:{this.props.secs < 10 ? '0' + this.props.secs : this.props.secs} </div>
        <button id="start_stop">⏵︎⏸︎</button>
        <button id="reset" onClick = {this.reset}>Reset</button>
      </div>
    );
  }
}



ReactDOM.render(<App />, document.getElementById('root'))

Upvotes: 0

Views: 78

Answers (1)

grooot
grooot

Reputation: 466

In breakCounterIncrement, 

breakCounterIncrement = () => { 
this.setState ({                                 // remove "=" 
breakCounter: ++this.state.breakCounter         //change increment 
              }) 
console.log('Parent State ' + this.state.breakCounter); 
//parent's state is updating 
}

Increment ++:
Both of these statements do the same thing: increase counter by 1.
The prefix form ++counter increments counter and returns the new value. the postfix form counter++ also increments counter but returns the old value.

To summarize:
If the result of increment/decrement is not used, there is no difference in which form we use.
If we’d like to increase a value and immediately use the result of the operator, we need the prefix form.

Upvotes: 1

Related Questions