How do I Increment a React Prop

Question

Introduction

Hello, I'm trying to build a counter component 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 component 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>
    );
  }
}

Answer 1

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 complicated 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 component
2. Find a way to update this state.

This is where React's component state comes 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 component. Next we need a way to update it. This means the child needs to do some up-word communication to the parent since the state is inside the parent component.

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 components. 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!

Answer 2

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

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

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