CODEWITHSUNDEEP
javascriptreactjs
Hernan Ariel
Hernan Ariel

Reputation: 273

How can I check whether an item already exists in state?

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 with this code? I can´t figure out any, and I´ve tried all methods I could think of (Indexof, contains, etc, even turning value into an array didn´t help).

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: 'decimal', value: '.'},{number: 'equals', value: '='},{number: 'multiply', value: '*'}];


  class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = { value: "0"};
    this.handleClick = this.handleClick.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,".")
      })); 
}


}







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>
{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>
)

}

}

Upvotes: 2

Views: 710

Answers (2)

Ramesh
Ramesh

Reputation: 13266

In Handle click, try replacing the default to below

  handleClick(evt) {
    const id = evt.target.id;
    let 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 => {
          const numbers = prevState.value.split(/[+\-*=]/g);
          const lastNumber = numbers[numbers.length - 1];
          if (result === ".") {
            console.log((lastNumber.match(/\./g) || []).length);
            if (lastNumber.length === 0) {
              result = ""; //Remove if first charracter is decimal
            }
            if ((lastNumber.match(/\./g) || []).length > 0) {
              result = "";
            }
          }
          let value = `${prevState.value}${result}`
            .replace(/([+\-*=])([+\-*=])/g, "$2")
            .replace(/^0+(?=[1-9])/, "")
            .replace(/^0+(?=\.)/, "0")
            .replace(/^0+\B/, "");

          return {
            value
          };
        });
    }
  }

Upvotes: 1

Jake Haller-Roby
Jake Haller-Roby

Reputation: 6427

The method you're looking for is includes

EDIT per your additional information:

var positions = [];
for(i = 0; i < this.state.value.length; i++) {
    if(this.state.value.charAt(i) === result) {
        positions.push(i);
    }
}

You'll have to edit to fit your specific needs (I get the impression you're looking for something specific which you haven't overtly stated) but I imagine this gets you past your obstacle.

Upvotes: 0

Related Questions