Introduction

Hello, I'm trying to build a counter ponent for my online store, but I'm having trouble getting with it to function correctly.

Problem

From my understanding is that the count value will not increment because it remains in the same instance, and the value is never changed in the parent ponent just re-rendered. Declaring a variable and trying to increment locally in the addOne() method also is causing the value not to change.

Question

Is there something I'm not understanding about instances and how they work, can anyone give me some suggestions?

class ParentComponentClass extends React.Component {
  render() {
    const test = "Is anything printing?";
    let count = 0;
    return (
      <div>
        <QuantityCounter_CheckoutButton count={count} />
        <Test test={test} />
      </div>
    );
  }
}

class QuantityCounter_CheckoutButton extends React.Component {
  constructor(props) {
    super(props);
    this.addOne = this.addOne.bind(this);
  }
  addOne() {
    let qtyCount = this.props.count;
    qtyCount++;
    console.log(qtyCount);

  }

  render() {
    return (
      <div>
        <a href="#" id="bazuka_add" onClick={this.addOne}>
          <i className="material-icons ">add_circle_outline</i>
        </a>
        <a href="#" id="bazuka_remove" onClick={this.minusOne}>
          <i className="material-icons ">remove_circle_outline</i>
        </a>
        <p>qty:</p>
      </div>
    );
  }
}

Introduction

Hello, I'm trying to build a counter ponent for my online store, but I'm having trouble getting with it to function correctly.

Problem

From my understanding is that the count value will not increment because it remains in the same instance, and the value is never changed in the parent ponent just re-rendered. Declaring a variable and trying to increment locally in the addOne() method also is causing the value not to change.

Question

Is there something I'm not understanding about instances and how they work, can anyone give me some suggestions?

class ParentComponentClass extends React.Component {
  render() {
    const test = "Is anything printing?";
    let count = 0;
    return (
      <div>
        <QuantityCounter_CheckoutButton count={count} />
        <Test test={test} />
      </div>
    );
  }
}

class QuantityCounter_CheckoutButton extends React.Component {
  constructor(props) {
    super(props);
    this.addOne = this.addOne.bind(this);
  }
  addOne() {
    let qtyCount = this.props.count;
    qtyCount++;
    console.log(qtyCount);

  }

  render() {
    return (
      <div>
        <a href="#" id="bazuka_add" onClick={this.addOne}>
          <i className="material-icons ">add_circle_outline</i>
        </a>
        <a href="#" id="bazuka_remove" onClick={this.minusOne}>
          <i className="material-icons ">remove_circle_outline</i>
        </a>
        <p>qty:</p>
      </div>
    );
  }
}

• javascript
• reactjs

3 Answers 3

So I know you have marked this as answered but I want to explain this concept to you.This is a simple but very important concept to grab.

Just imagine two functions

function manipulateCounter(count){
    count++
    console.log(count)
}

function counterContainer(){
    let countVariable = 0;
    manipulateCounter(countVariable);
    manipulateCounter(countVariable);
    manipulateCounter(countVariable);
    console.log(count);
}

I have a container which calls an incrementer. Now my target is to increment the 'countVariable'. But the way I have done it; my incrementing logic is broken. This is because by passing the 'value' via function I am just passing a copy of the value but not a way to manipulate my variable itself. (If you pass an object it's a whole other story but that deserves a separate blog post)

This is the same with props! You are just incrementing a copy of the values sent to you. Also it gets a little more plicated with react because the 'render(){}' is meant to be something called a pure function. Simply for you this means each time there is a change in react the stuff inside render is destroyed and rerun from scratch. This means you can't maintain a counter variable inside 'render'.

So we have 2 problems.

1. Find a way to properly maintain a 'state' in the ponent
2. Find a way to update this state.

This is where React's ponent state es in handy!

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state ={
             count : 0;
        }
    }


    render (){
       <Child count={this.state.count}/>
    }
}

So now we have found a safe way to maintain the 'state count' in our react ponent. Next we need a way to update it. This means the child needs to do some up-word munication to the parent since the state is inside the parent ponent.

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state ={
             count : 0;
        }
    }

    increment(){
        this.setState({ counts : this.state.count + 1});
    }   

    render (){
       return(<Child count={this.state.count} increment={this.increment.bind(this)}/>);
    }
}

This is a very powerful concept in react that allows to build reusable ponents. The Child doesn't know anything about how the parent manages the variable. It is only being passed the current value of the count as well as a function it should call in case the value needs to be incremented.

So in my child I just have to do this...

class Child extends React.Component{
    render (){
       <div>
           <div>{this.props.count}</div>
           <button onClick={this.props.increment} >Increment</button>
       </div> 
    }
}

You just have to modify this learning in to your app. Good Luck!

You cannot change a react Prop like this. What you need is probably State

Prop only got passed from parent to the child ponent and if a prop is going to be changed, it should happen in the parent ponent.

Check the difference between State and Props here : https://reactjs/docs/faq-state.html

I agree about "Check the difference between State and Props here : https://reactjs/docs/faq-state.html". But also you should rearrange your ponents so state and setState will be in one ponent, because if you don't use Redux the state is local. I would remend to read this article https://medium.freecodecamp/get-pro-with-react-setstate-in-10-minutes-d38251d1c781

By the way, if you use Redux you can leave your layout and set state via reducers. Now you can update your props when state changed using mapStateToProps.