Kode Calculator dengan React.Js

 Hai Guys... Ini kode kalkulator sederhana dengan react js


import React, { useState } from 'react';


const Calculator = () => {

  const [display, setDisplay] = useState('');


  const handleButtonClick = (value) => {

    if (value === '=') {

      try {

        setDisplay(eval(display).toString());

      } catch (error) {

        setDisplay('Error');

      }

    } else if (value === 'C') {

      setDisplay('');

    } else {

      setDisplay(display + value);

    }

  };


  return (

    <div className="calculator">

      <input type="text" value={display} disabled />

      <div className="buttons">

        <button onClick={() => handleButtonClick('7')}>7</button>

        <button onClick={() => handleButtonClick('8')}>8</button>

        <button onClick={() => handleButtonClick('9')}>9</button>

        <button onClick={() => handleButtonClick('/')}>/</button>

        <button onClick={() => handleButtonClick('4')}>4</button>

        <button onClick={() => handleButtonClick('5')}>5</button>

        <button onClick={() => handleButtonClick('6')}>6</button>

        <button onClick={() => handleButtonClick('*')}>*</button>

        <button onClick={() => handleButtonClick('1')}>1</button>

        <button onClick={() => handleButtonClick('2')}>2</button>

        <button onClick={() => handleButtonClick('3')}>3</button>

        <button onClick={() => handleButtonClick('-')}>-</button>

        <button onClick={() => handleButtonClick('0')}>0</button>

        <button onClick={() => handleButtonClick('.')}>.</button>

        <button onClick={() => handleButtonClick('=')}>=</button>

        <button onClick={() => handleButtonClick('+')}>+</button>

        <button onClick={() => handleButtonClick('C')}>C</button>

      </div>

    </div>

  );

};


export default Calculator;


Komentar