How to hide react element when specific value is reached? - reactjs

Question

I'm planning to make "online shopping cart" template in react. However, I can't figure out how to hide "counters" element when "count" reaches zero
I managed to make separated button which hides element on click, but that's not suitable for this project.
counter.jsx
import React, { Component } from 'react';
import Counters from './counters';
class Counter extends Component {
state = {
count: 1
};
handleIncrement = () => {
this.setState({count: this.state.count + 1});
}
handleDelete = () => {
this.setState({count: this.state.count - 1});
if (this.state.count == 0) {
this.state.counters = {
isHidden: true
}
}
}
render() {
let classes = 'badge m-2 badge-';
classes += this.state.count === 1 ? 'primary' : 'primary';
return (
<div>
<span className={classes}>{this.formatCount()}</span>
<button onClick={() => this.handleIncrement()} className='btn btn-primary m-2'>+</button>
<button onClick={() => this.handleDelete()} className="btn btn-danger m-2">-</button>
</div>
);
}
formatCount() {
const {count} = this.state;
return count === 0 ? 'Reached' : count;
}
}
export default Counter;
counters.jsx
import React, { Component } from 'react';
import Counter from './counter';
class Counters extends Component {
state = {
counters: [
{ id: 1, value: 1 },
{ id: 2, value: 1 },
{ id: 3, value: 1 },
{ id: 4, value: 1 }
]
}
render() {
return (
<div>
{this.state.counters.map(
counter => (
<Counter key={counter.id} value={counter.value} id={counter.id} />
))}
</div>
);
}
}
export default Counters;
So, when delete button is pressed it should go from 1 to 0, and when it reaches zero, counters element should disappear(based on Id).

Answer 1

Generally https://stackoverflow.com/a/54649508/10868273 answer should be the way forward but you in order not to change too much you could try this (i've included only the changes you want to make)
counter.jsx
handleIncrement = () => {
this.setState((state) => ({
count: state.count + 1
}));
}
handleDelete = () => {
this.setState((state) => ({
count: state.count - 1
}),() => {
if (this.state.count <= 0){
this.props.handleCounterRemove(this.props.id);
}
});
}
Counters.jsx
import React, { Component } from 'react';
import Counter from './counter';
class Counters extends Component {
state = {
counters: [
{ id: 1, value: 1 },
{ id: 2, value: 1 },
{ id: 3, value: 1 },
{ id: 4, value: 1 }
]
}
handleCounterRemove = (counterId) =>{
const { counters } = this.state;
this.setState((state)=> ({
counters: state.counters.filter(counter => counter.id !== counterId)
}));
}
render() {
return (
<div>
{this.state.counters.map(
counter => (
<Counter key={counter.id} value={counter.value} id={counter.id} handleCounterRemove={this.handleCounterRemove} />
))}
</div>
);
}
}
export default Counters;
As has been mentioned in the other answers, you do not want to just call setState if the next value depends on the pervious one: you can read more on this here React SetState documentation
Also, notice the introduction of handleCounterRemove in the Counters component it's like the only way a child component can affect it's parent component

Answer 2

As Joe mentioned in the comments, you are mutating the state directly, which is very anti-pattern. Always use setState().
Also, whenever you are setting a new state that depends on a previous state variable, pass in a callback to setState() rather than an object. This can save you a few headaches in certain cases.
handleDelete = () => {
this.setState(prevState => ({
count: prevState.count - 1,
isHidden: prevState.count === 1 // Hide if we are decreasing count from 1 to 0
}));
}

Answer 3

Keep Counter as a stateless component. Store the counter state in the Counters component itself. Move the increment, decrement functions to Counters component. In decrement function, write logic such that when it hits 0, remove the corresponding counter object from this.state.counters.

Answer 4

You can also return null from your render() method in counter.jsx, when this.state.coun is 0

Answer 5

You should redevelop the method handleDelete. Here is the possible version
handleDelete = () => {
let currentCount = this.state.count - 1;
this.setState({
count: currentCount
counters: {
isHidden: currentCount === 0
}
});
}