Is there anyway that I could check if a number already exists (and for instance, if there are more than one instance of a particular number, etc) in state in this code? I can´t figure out any, and I´ve tried all methods I could think of (Indexof, contains, etc).
const button1 = [{number: 'one', value: '1'},{number: 'two', value: '2'},{number: 'three', value: '3'},{number: 'divide', value: '/'}];
const button2 = [{number: 'four', value: '4'},{number: 'five', value: '5'},{number: 'six', value: '6'},{number: 'add', value: '+'}];
const button3 = [{number: 'seven', value: '7'},{number: 'eight', value: '8'},{number: 'nine', value: '9'},{number: 'subtract', value: '-'}];
const button4 = [{number: 'zero', value: '0'},{number: 'equals', value: '='},{number: 'multiply', value: '*'}];
class Calculator extends Component {
constructor(props) {
super(props);
this.state = { value: "0"};
this.handleClick = this.handleClick.bind(this);
this.handleDecimal=this.handleDecimal.bind(this);
}
handleClick(evt) {
const id = evt.target.id;
const result = evt.target.value;
switch(id) {
case 'clear':
this.setState({ value: "0"});
break;
case 'equals':
this.setState(prevState => ({
value: math.eval(this.state.value)
}));
break;
default: this.setState(prevState => ({
value: `${prevState.value}${result}`
.replace(/([/+\-/*=])([/+\-*=])/g, "$2")
.replace(/^0+(?=[1-9])/, "")
.replace(/^0+(?=\.)/, "0")
.replace(/^0+\B/, "")
.replace(/\.+/g,".")
}));
}
}
handleDecimal(evt){
let result2=evt.target.value;
let value=this.state.value;
let decimalPosition=value.indexOf(result2);
let numbers=/[0-9]/g;
let numberSearch=value.search(numbers);
if(numberSearch>decimalPosition){
this.setState({value:this.state.value + result2});
}
}
render() {
return(
<div id="container">
<Display value={this.state.value} />
<div>
{button1.map((el, index) => <Button onClick={this.handleClick} key={el.index} id={el.number} value={el.value} />)}
</div>
<div>
{button2.map((el, index) => <Button onClick={this.handleClick} key={el.index} id={el.number} value={el.value} />)}
</div>
<div>
{button3.map((el, index) => <Button onClick={this.handleClick} key={el.index} id={el.number} value={el.value} />)}
</div>
<div>
<Button onClick={this.handleDecimal} id="decimal" value={'.'} />
{button4.map((el, index) => <Button onClick={this.handleClick} key={el.index} id={el.number} value={el.value} />)}
</div>
<div>
<Button onClick={this.handleClick} id="clear" value={'clear'} />
</div>
</div>
)
}
}