Auto Update value in react component

Question

I'm trying to build a component with auto-updating value based on cookies:

let cookies = 0;
(function count() {
cookies = document.cookie.split("?");
setTimeout(count, 10);
return cookies;
})();


class CartButton extends React.Component {
    state = {quantity: cookies.length}
    render() {
      return (
        <Cart onClick={e=>{show_cart()}}>
    <Mfont>{this.state.quantity}</Mfont>
    <Icon>shopping_cart</Icon>
    </Cart>
      );
    }
  }

'count' function works as expected, component is rendered with the latest value returned. Unfortunately, it does not auto-update when 'cookies' are changed. It returns this error:

Warning: render(...): Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render.

I have tried various variations here but still can't figure it out :/

Do you have a sandbox/fiddle/codepen for this?

Jayendra Sharan
– Jayendra Sharan

2019-06-13 05:01:03 +00:00
Commented Jun 13, 2019 at 5:01 — Jayendra Sharan
– Jayendra Sharan, Commented Jun 13, 2019 at 5:01

ravibagul91 · Accepted Answer · 2019-06-13 07:35:15Z

2

componentDidMount will get execute only once when your component loads first time. This is the correct place to write any logic which we need to execute after page load.

Try this,

class CartButton extends React.Component {
    //It is good to have a constructor for the component which has state
    constructor(props){
      super(props);
      this.state = {quantity: cookies.length}
      this.updateQuantity;
    }

    componentDidMount(){
      this.updateQuantity = setInterval(()=> {
        cookies = document.cookie.split("?");
       this.setState({quantity: cookies.length})
      },10)
    }
    //Don't forget to clear any setInterval like below
    componentWillUnmount(){
       clearInterval(this.updateQuantity);
    }
    render() {
      return (
        <Cart onClick={e=>{show_cart()}}>
          <Mfont>{this.state.quantity}</Mfont>
          <Icon>shopping_cart</Icon>
        </Cart>);
    }
  }

edited Jun 13, 2019 at 7:35

answered Jun 13, 2019 at 7:29

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harish · Accepted Answer · 2019-06-13 05:43:40Z

1

Here your CartButton is not updating even though count is working fine because CartButton is not listening to your cookies variable. React component updates only when there is either props or state change. You can something like this..

class CartButton extends React.Component {
    state = {quantity: cookies.length}

    componentDidMount(){
      setInterval(function count() {
        cookies = document.cookie.split("?");
       this.setState({quantity: cookies})
      }.bind(this), 10)
    }
    render() {
      return (
        <Cart onClick={e=>{show_cart()}}>
          <Mfont>{this.state.quantity}</Mfont>
          <Icon>shopping_cart</Icon>
        </Cart>);
    }
  }

answered Jun 13, 2019 at 5:43

Harish

1,9111 gold badge15 silver badges26 bronze badges

Collectives™ on Stack Overflow

Auto Update value in react component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related