I need help on the JavaScript Calculator Project

1

Hello,

I’m working on the JavaScript Calculator project and I’m now stuck . I’ve been trying to code the application so that when I input a number and there is a number greater than 0 on the display, the inputted number will be appended to the existing one on the display. As much as I have tried, I don’t seem to be making any progress. Your hint or help will be appreciated.

import React from 'react'
import '../styles/styles.css'

class Controls extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            curValue: 0,
            preValue: this.props.defaultValue
        }
        //this.keypadRef = [];
        this.handleClick = this.handleClick.bind(this)
    }
    // getKeypadRefs = (el) => {
    //     this.keypadRef.push(el);
    // }

    handleClick(event) {
        const displayValue = this.setState({ curValue: event.target.value }, () => {
            this.props.setDisplayValue(this.state.curValue)
        if (Number(this.state.preValue) > 0 && Number(this.state.preValue) <= 9) {
            return this.props.setDisplayValue(this.state.preValue + "" + this.state.curValue)
        }
            return this.props.setDisplayValue(this.state.curValue);
    })
        //console.log("Prevoius value: " + this.state.preValue)
        //console.log("Current value: " + this.state.curValue)
        


        //this.props.setDisplayValue();
    }

    render() {
        //const value = this.state.value
        return (
            <div className="controls-container">
                <button id="clear" onClick={this.props.handleReset}>AC</button>
                <button id="divide"  value='/' onClick={this.handleClick}>/</button>
                <button id="multiply"  value='*' onClick={this.handleClick}>*</button>

                <button id="seven"  value='7' onClick={this.handleClick}>7</button>
                <button id="eight"  value='8' onClick={this.handleClick}>8</button>
                <button id="nine"  value='9' onClick={this.handleClick}>9</button>
                <button id="subtract" value='-' onClick={this.handleClick}>-</button>

                <button id="four"  value='4' onClick={this.handleClick}>4</button>
                <button id="five"  value='5' onClick={this.handleClick}>5</button>
                <button id="six"  value='6' onClick={this.handleClick}>6</button>
                <button id="add"  value='+' onClick={this.handleClick}>+</button>

                <button id="one"  value='1' onClick={this.handleClick}>1</button>
                <button id="two"  value='2' onClick={this.handleClick}>2</button>
                <button id="three"  value='3' onClick={this.handleClick}>3</button>
                <button id="equals"  value='=' onClick={this.handleClick}>=</button>

                <button id="zero"  value='0' onClick={this.handleClick}>0</button>
                <button id="decimal"  value='.' onClick={this.handleClick}>.</button>

            </div>
        )
    }



}



const Display = props => {

    return (
        <div id="display">{props.defaultValue}</div>
    )
}



class Calculator extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            defaultValue: 0
        }
        this.handleReset = this.handleReset.bind(this)
        this.setDisplayValue = this.setDisplayValue.bind(this)
        // this.getDisplayValue = this.getDisplayValue.bind(this)

        //this.handleClick = this.handleClick(this);

    }
    handleReset() {
        this.setState({
            defaultValue: 0
        })
    }

    setDisplayValue(value) {
        this.setState({
            defaultValue: value
        })
    }

    // getDisplayValue(){

    // }
    render() {
        return (
            <div id="calculator-container">
                <Display defaultValue={this.state.defaultValue} />
                <Controls defaultValue={this.state.defaultValue} handleReset={this.handleReset} setDisplayValue={this.setDisplayValue} getDisplayValue={this.getDisplayValue} />
            </div>
        )
    }

}

// function appendValue(preValue, curValue){
//     if(preValue > 0 && preValue <= 9){
//         console.log(preValue +""+ curValue)
//         return (preValue +""+ curValue) 
//     }
//     console.log(curValue)
//     return curValue;
// }

export default Calculator
2

In the handleClick method, you don’t need to assign the setState method to a variable, you want to call it to update the state. So, at the beginning of the handleClick method, work out what the state should be using ‘if/else’ structures. Then on the second to last line of the handleClick method, call the setState method, with the curValue key and the new displayValue. Then call the setDisplayValue method. You don’t need to return anything.

3

I have tried the approach you stated and I don’t seem to be making any headway. I think my logic is incorrect and I will need a real help to overcome this challenge.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.