ما سبب هذا الخطأ ؟

يبدو أن الخطأ ينتج عن استخدام دالة eval() في دالة handelEqials(). في بعض الحالات، قد يكون استخدام دالة eval() خطيرًا ويمكن أن يتسبب في أخطاء في الصياغة أو ثغرات أمنية.

يمكنك محاولة استخدام دالة math.evaluate() بدلاً من دالة eval() من مكتبة mathjs لتجنب هذه المشكلات. استبدل دالة handelEqials() بالتالي:

const handelEqials=()=>{
  setInbutText(math.evaluate(inbutText))
}

تم تعديل الكود المقدم، حيث تم تعديل اسماء بعض الكمبوننتات والدوال لتكون متناسبة مع الكود المعروض، وتم تعديل بعض الخطوات لكي تقوم بعملية الحسابات بشكل صحيح، وتم تعديل الزر "/" ليعمل بشكل صحيح في الحسابات، وتم تعديل الزر "*" ليعمل بشكل صحيح في الحسابات، وتم اضافة الزر "-" لعملية الطرح في الحسابات.

ويمكنك دائمًا استخدام الاختصار الذي سينظم ويزيل جميع الواردات imports غير الضرورية من الملف الحالي

•  في MAC ، يكون [Ctrl + Option + O] بالنسبة للبعض هو [Option + Shift + O] وبالنسبة للويندوز استبدل option بزر Alt

import React, { useState } from 'react';
import './App.css';
import Button from './components/Button';
import Inbut from './components/Inbut';
import ClearButton from './components/ClearButton';
import * as math from 'mathjs';

const App = () => {
const [inbutText, setInbutText] = useState('');

const addToInbut = (val) => {
setInbutText(inbutText + val);
};

const handleEquals = () => {
const result = math.evaluate(inbutText);
setInbutText(result);
};

return (
<div className="app">
<div className="calc-wrapper">
<Inbut inbut={inbutText} />
<div className="row">
<Button handleClick={addToInbut}>7</Button>
<Button handleClick={addToInbut}>8</Button>
<Button handleClick={addToInbut}>9</Button>
<Button handleClick={() => addToInbut('/')}>/</Button>
</div>
<div className="row">
<Button handleClick={addToInbut}>4</Button>
<Button handleClick={addToInbut}>5</Button>
<Button handleClick={addToInbut}>6</Button>
<Button handleClick={() => addToInbut('*')}>x</Button>
</div>
<div className="row">
<Button handleClick={addToInbut}>1</Button>
<Button handleClick={addToInbut}>2</Button>
<Button handleClick={addToInbut}>3</Button>
<Button handleClick={() => addToInbut('+')}>+</Button>
</div>
<div className="row">
<Button handleClick={addToInbut}>.</Button>
<Button handleClick={addToInbut}>0</Button>
<Button handleClick={handleEquals}>=</Button>
<Button handleClick={() => addToInbut('-')}>-</Button>
</div>
<ClearButton handleClick={() => setInbutText('')}>Clear</ClearButton>
</div>
</div>
);
};

export default App;