I want to create three sets of +/- buttons that increase and decrease three separate progress bars. With this.state, I can increment one counter but all of them change at the same time.
The following prior solution tries to explain the answer but I can't use it because I am not using a
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav,
NavItem, NavLink, Container, Row, Col, Jumbotron, Button,
ButtonToolbar } from 'reactstrap';
import { Progress } from 'react-sweet-progress';
import "react-sweet-progress/lib/style.css";
class App extends React.Component {
constructor(props) {
super(props)
this.state = { countera: 0}
this.addFive = this.addFive.bind(this)
this.subFive = this.subFive.bind(this)
}
addFive(x) {
this.setState(prevState => ({
x: prevState.x + 5 }));
}
subFive(x) {
this.setState(prevState => ({
x: prevState.x - 5 }));
}
render() {
var alpha = this.state.countera;
var beta = 30;
var gamma = 30;
var sum = alpha + beta + gamma;
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>Welcome to FICO Reactor</p>
<ButtonToolbar>
<Button tag="a"color="success" size="large" href=""
target="_blank">Begin</Button>
</ButtonToolbar>
<p>
</p>
<div class="grid-container">
<div class="grid-item" color="blue">Items Corrected</div>
<div class="grid-item">Items In Repair</div>
<div class="grid-item">Remaining Hits</div>
<div class="grid-item"><Progress width={200} type="circle"
percent={100*alpha/sum} status="success" /></div>
<div class="grid-item"><Progress width={200} type="circle"
percent={100*beta/sum} status="success" /></div>
<div class="grid-item"><Progress width={200} type="circle"
percent={100*gamma/sum} status="error" /></div>
<div class="grid-item">{alpha} Items</div>
<div class="grid-item">{beta} Items</div>
<div class="grid-item">{gamma} Items</div>
**<div class="grid-item"><Button onClick={this.addFive()}>+
</Button> - <Button onClick={alpha}>-</Button></div>**
<div class="grid-item">Buttons2</div>
<div class="grid-item">Buttons3</div>
</div>
<p>Disclaimer</p>
</header>
</div>
);
}
}
export default App;
I want the have an increase function and a decrease function that accepts a parameter indicating which of the three buttons variables should be affected and do it to only that variable.
If only there was a this.state.counterA, this.state.counterB, this.state.counterC.
To increment/decrement a different counter, just we need to pass the name of the counter in the addFive and subFive function.
///update the state like this
this.state = { countera: 0, counterb: 0, counterc: 0 }
///pass the name of the counter on the click function
addFive(name) {
this.setState(prevState => ({
[name]: prevState[name] + 5
}));
}
///pass the name of the counter on the click function
subFive(name) {
this.setState(prevState => ({
[name]: prevState[name] - 5
}));
}
///update the render function
var alpha = this.state.countera;
var beta = this.state.counterb;
var gamma = this.state.counterc;
var sum = alpha + beta + gamma;
return (
<div className="App">
<header className="App-header">
<div class="grid-container">
<div class="grid-item"><Progress width={200} type="circle"
percent={100 * alpha / sum} status="success" /></div>
<div class="grid-item"><Progress width={200} type="circle"
percent={100 * beta / sum} status="success" /></div>
<div class="grid-item"><Progress width={200} type="circle"
percent={100 * gamma / sum} status="error" /></div>
**<div class="grid-item"><Button onClick={() => this.addFive('countera')}>+
</Button> - <Button onClick={() => this.subFive('countera')}>-</Button></div>**
**<div class="grid-item"><Button onClick={() => this.addFive('counterb')}>+
</Button> - <Button onClick={() => this.subFive('counterb')}>-</Button></div>**
**<div class="grid-item"><Button onClick={() => this.addFive('counterc')}>+
</Button> - <Button onClick={() => this.subFive('counterc')}>-</Button></div>**
</div>
</header>
</div>
);If you want to simplify your state change function, then create one function and pass the name and the value (increment/decrement) like below:
changeFive(name, value) {
this.setState(prevState => ({
[name]: prevState[name] + value
}));
}
<div class="grid-item"><Button onClick={() => this.changeFive('countera', 5)}>+
</Button> - <Button onClick={() => this.changeFive('countera', -5)}>-</Button></div>Hope it helps :)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments