React - Passing data counter from child to parents component - reactjs

Question

so, im just learning about props method and i want to try how to passing data from child to parent component.
im trying to make counter app, when click + the counter increasing and click - the counter decreasing
i have parent component like this
import React, { useState } from 'react';
import ComponentB from './ComponentB'
const ComponentA = () => {
const [counterB , setCounterB] = useState(0);
return(
<div>
<h1>ComponentB</h1>
<h3>{counterB}</h3>
<ComponentB
add={counterB => setCounterB(counterB)}
subtract={counterB => setCounterB(counterB)}/>
</div> );
}
export default ComponentA;
and child component like this
import React from 'react';
const ComponentB = (props) =>{
return(
<div>
<button onClick={()=> props.add(+1)}>+</button>
<button onClick={()=> props.subtract(-1)}>-</button>
</div>
);
}
export default ComponentB

Answer 1

With
return(
<div>
<h1>ComponentA</h1>
<h3>{counterB}</h3>
<ComponentB
add={diff => setCounterB(counterB + diff)}
subtract={diff => setCounterB(counterB + diff)}/>
</div> );
you pass the function diff => setCounterB(counterB + diff) to ComponentB as prop.add. This function sets the state of counterB to the first argument of that function. So when the button invokes props.add(+1)} the value of counterB is set to 1 every time it is pressed.
What you want is to add +1 to the state of counterB. Thus you should it this way:
// Get a hook function - only needed for this Stack Snippet
const {useState} = React;
const ComponentA = () => {
const [counterB , setCounterB] = useState(0);
return(
<div>
<h1>ComponentA</h1>
<h3>{counterB}</h3>
<ComponentB
add={diff => setCounterB(counterB + diff)}
subtract={diff => setCounterB(counterB + diff)}/>
</div> );
}
const ComponentB = (props) =>{
return(
<div>
<button onClick={()=> props.add(+1)}>+</button>
<button onClick={()=> props.subtract(-1)}>-</button>
</div>
);
}
ReactDOM.render(
<ComponentA/>,
document.getElementById("react")
);
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

I'd suggest to create a method in the Parent component to update the state given a value received from the child.
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.updateCountWithValue = this.updateCountWithValue.bind(this);
}
updateCountWithValue(value) {
let count = this.state.count;
count += value;
this.setState({
count: count
});
}
render() {
return (
<div>
<h1>{`Count: ${this.state.count}`}</h1>
<Child updateCount={this.updateCountWithValue} value={1} />
<Child updateCount={this.updateCountWithValue} value={-1} />
</div>
);
}
}
class Child extends Component {
render() {
return (
<div>
<button onClick={() => this.props.updateCount(this.props.value)}>
{this.props.value}
</button>
</div>
);
}
}
As you can see, the props of my Child component are:
The value that the child will update or change
A method to update the Parent component.
I made this sample so you can see how it works: https://codesandbox.io/s/child-to-parent-uvfmi?file=/src/App.js

Answer 3

Instead of this:
<ComponentB
add={counterB => setCounterB(counterB)}
subtract={counterB => setCounterB(counterB)}/>
Try this:
<ComponentB
add={val => setCounterB(counterB+val)}
subtract={val => setCounterB(counterB+val)}/> // using '+' coz val = -1