MUI Icon button show border when clicked - reactjs

Question

I have used an Iconbutton for my website but when it is clicked it shows a border & the animation is also gone. Also, I would like to know how to assign functions to my + / - buttons to increase & decrease the value in the text input. following is my full code. I get the NaN in
Code:
export class BookingSummary extends Component {
constructor(props) {
super(props);
this.state = {
seatPrice: [],
dataLoaded: false,
priceList :[],
};
}
state = { value: 0 };
onPlusClick = () => {
this.setState({ ...this.state, value: this.state.value + 1 });
};
onMinusClick = () => {
this.setState({ ...this.state, value: this.state.value - 1 });
};
render () {
return (
<IconButton
onClick={this.onMinusClick}
aria-label="minus"
style={{ marginTop: 15 }}
>
<RemoveCircleIcon fontSize="inherit" />
</IconButton>
<TextField
value={this.state.value}
id="outlined-adornment-small"
// defaultValue="50"
variant="outlined"
size="small"
style={{ width: 48, height: 35 }}
labelWidth={0}
/>
<IconButton
onClick={this.onPlusClick}
aria-label="plus"
style={{ marginTop: 15 }}
>
<AddCircleIcon fontSize="inherit" />
</IconButton>

Answer 1

You can achieve your aim with predifined setState in classify component. Also you need to use onClick for IconButtons. When user clicks on the buttons, you should change the value of the counter. Here's the classify component which you would like to implement:
import React from "react";
import IconButton from "#material-ui/core/IconButton";
import TextField from "#material-ui/core/TextField";
import RemoveCircleIcon from "#material-ui/icons/RemoveCircle";
import AddCircleIcon from "#material-ui/icons/AddCircle";
import "./styles.css";
export class MyComponent extends React.Component {
state = {
value: 0
};
onPlusClick = () => {
this.setState({ ...this.state, value: this.state.value + 1 });
};
onMinusClick = () => {
this.setState({ ...this.state, value: this.state.value - 1 });
};
render() {
return (
<div className="App">
<div className="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
<div className="row">
<div className="col-md-12">
<div className="st_dtts_bs_wrapper float_left">
<div className="st_dtts_bs_heading float_left">
<p>Booking summary</p>
</div>
<div className="st_dtts_sb_ul float_left">
<ul>
<li>
movieData.seats
<br />( 5 Tickets ) ODC <span>Rs .50</span>
</li>
<li>
Child Tickets
<br />( 2 Tickets ) ODC <span>Rs .5 </span>
<br />
<br />
<IconButton
onClick={this.onMinusClick}
aria-label="minus"
style={{ marginTop: 15 }}
>
<RemoveCircleIcon fontSize="inherit" />
</IconButton>
<TextField
value={this.state.value}
id="outlined-adornment-small"
defaultValue="50"
variant="outlined"
size="small"
style={{ width: 48, height: 35 }}
labelWidth={0}
/>
<IconButton
onClick={this.onPlusClick}
aria-label="plus"
style={{ marginTop: 15 }}
>
<AddCircleIcon fontSize="inherit" />
</IconButton>
</li>
<li>
Handling fees <span>Rs. 25</span>
</li>
</ul>
</div>
<div className="st_dtts_sb_h2 float_left">
<h3>
Sub total <span>Rs. 55</span>
</h3>
<h4>
Current State is <span>Colombo</span>
</h4>
<h5>
Payable Amount{" "}
<span style={{ color: "#ff4444" }}>Rs. 555</span>
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default function App() {
return <MyComponent />;
}