CODEWITHSUNDEEP
javascriptreactjs
Ozubergs
Ozubergs

Reputation: 165

How to replace 0 inside input with single digits?

I'm trying to create a calculator. How do I remove the 0, which is the initial state, with input digits in the display? The first number I type should be 4, my display shows 04 instead. I am not sure how to remove the 0 in front. As I input numbers, I should be able to see my input starting without 0.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      operations: [0]
    }
    this.handleClick = this.handleClick.bind(this);
  }

  //calculation method
  calculateOperations() {
    let result = this.state.operations.join('');
    if(result) {
      result = math.eval(result);
      result = math.format(result, { precision: 14 });
      result = String(result);
      this.setState({
        operations: [result]
      });
    }
  }

  handleClick(e) {
    const value = e.target.getAttribute('data-value');
    switch(value) {
      case 'clear':
        this.setState({
          operations: [0]
        });
        break
      case '=':
        this.calculateOperations();
        break
      default:
        //creates new array with input digits
        const newOperations = [...this.state.operations, value];
        this.setState({
          operations: newOperations
        });
        break
    }
  }

  render() {
    return (
      <div className="container">
        <Display data={this.state.operations} />
        <Buttons>
          <Button onClick={this.handleClick} id='clear' label='AC' value='clear'/>
          <Button onClick={this.handleClick} id='seven' label='7' value='7'/>
          <Button onClick={this.handleClick} id='four' label='4' value='4' />
          <Button onClick={this.handleClick} id='one' label='1' value='1' />
          <Button onClick={this.handleClick} id='zero' lable='0' value='0' />

          <Button onClick={this.handleClick} id='divide' label='/' value='/' />
          <Button onClick={this.handleClick} id='eight' label='5' value='5' />
          <Button onClick={this.handleClick} id='five' label='8' value='8' />
          <Button onClick={this.handleClick} id='two' label='2' value='2' />
          <Button onClick={this.handleClick} id='decimal' label='.' value='.' />

          <Button onClick={this.handleClick} id='multiply' label='x' value='*' />
          <Button onClick={this.handleClick} id='nine' label='9' value='7' />
          <Button onClick={this.handleClick} id='six' label='6' value='6' />
          <Button onClick={this.handleClick} id='three' label='3' value='3'/>
          <Button label='' value='null' />

          <Button onClick={this.handleClick} id='subtract' label='-' value='-' />
          <Button onClick={this.handleClick} id='add' label='+' value='+' size='2' />
          <Button onClick={this.handleClick} id='equals' label='=' value='=' size='2'/>
        </Buttons>
      </div>
    );
  }
}

export default App;

Upvotes: 2

Views: 453

Answers (1)

Tyler
Tyler

Reputation: 2400

You could do some logic in handleClick that if the array only contains a 0 then replace it with a new array containing only the value entered, but I would consider a different approach. I think of the initial 0 as a placeholder, rather than an operation, and would instead initialize operations to [] and then have your Display component have a special case for props.data.length === 0 that renders the 0. This would help the logic in your handleClick remain simple by not needing to check for special values.

Upvotes: 2

Related Questions