JS Calculator

// Main component:
/* eslint no-eval: 0 */
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Display from './components/display';
import Keypad from './components/keypad';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            displayText: 0,
            toClear: true,
            onlyOneDecimal: false,
            noZero: true,
        };
        this.handleClick = this.handleClick.bind(this);
        this.handleText = this.handleText.bind(this);
        this.clear = this.clear.bind(this);
        this.operation = this.operation.bind(this);
    }

    clear() {
        this.setState({
            displayText: 0,
            toClear:true,
        })
    }

    operation() {
        this.setState({
            displayText: eval(this.state.displayText),
            toClear:true,
            onlyOneDecimal: false,
            noZero: true,
        })
    }

    handleText(event) {
        this.setState({
            displayText: event.target.value,
        })
    }

    handleClick(event) {
        if(!this.state.displayText && event.target.className === "sign"
        || this.state.noZero && event.target.id === "zero") {
            return;
        }

        if (event.target.id !== "zero") {
            this.setState({noZero: false});
        }

        if(event.target.name === "." ) {
            if (this.state.onlyOneDecimal) {
                return;
            }

            this.setState({onlyOneDecimal:true});
        }

        if (event.target.className === "sign") {
            this.setState({
                noZero: true,
                onlyOneDecimal: false,
            });
            if ("+-*/".includes(this.state.displayText[this.state.displayText.length-1])){
                this.setState({
                    displayText: this.state.displayText.slice(0,this.state.displayText.length-1)+event.target.name,
                });
                return;
            }
        }
        this.setState({
            displayText: (this.state.toClear && event.target.className !== "sign") ? "" + event.target.name : this.state.displayText + event.target.name,
            toClear:false,
        })
    }

    render() {
        return(
            <div className="calculadora">
                <Display text={this.state.displayText} textHandler={this.handleText}/>
                <Keypad operation={this.operation} clickHandler={this.handleClick} clear={this.clear}/>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

//Display component:
import React from 'react';

const Display = props => {

        return(
            <div className="displayBox">
                <input id="display" value={props.text} onChange={props.textHandler} readOnly />
            </div>
        )
}

export default Display;

//Keypad component:
import React from 'react';

const Keypad = props => {
    return(
        <div className="keyContainer">
            <table>
                <tbody>
                    <tr>
                        <td><button onClick={props.clickHandler} name="1" id="one">1</button></td>
                        <td><button onClick={props.clickHandler} name="2" id="two">2</button></td>
                        <td><button onClick={props.clickHandler} name="3" id="three">3</button></td>
                        <td><button onClick={props.clickHandler} className="sign" id="add" name="+">+</button></td>
                    </tr>
                    <tr>
                        <td><button onClick={props.clickHandler} name="4" id="four">4</button></td>
                        <td><button onClick={props.clickHandler} name="5" id="five">5</button></td>
                        <td><button onClick={props.clickHandler} name="6" id="six">6</button></td>
                        <td><button onClick={props.clickHandler} className="sign" id="subtract" name="-">-</button></td>
                    </tr>
                    <tr>
                        <td><button onClick={props.clickHandler} name="7" id="seven">7</button></td>
                        <td><button onClick={props.clickHandler} name="8" id="eight">8</button></td>
                        <td><button onClick={props.clickHandler} name="9" id="nine">9</button></td>
                        <td><button onClick={props.clickHandler} className="sign" id="multiply" name="*">*</button></td>
                    </tr>
                    <tr>
                        <td><button onClick={props.clickHandler} name="." id="decimal">.</button></td>
                        <td><button onClick={props.clickHandler} name="0" id="zero">0</button></td>
                        <td><button onClick={props.operation} id="equals">=</button></td>
                        <td><button onClick={props.clickHandler} className="sign" id="divide" name="/">/</button></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><button onClick={props.clear} id="clear">C</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    )
}

export default Keypad;