I made a calculator in react js but i want to add a functionality to show history of calculation but confused how to do it? Thats my code please review it and give me solution.If there is any other idea to do that then suggest me I made a calculator in react js but i want to add a functionality to show history of calculation but confused how to do it? Thats my code please review it and give me solution.If there is any other idea to do that then suggest me I made a calculator in react js but i want to add a functionality to show history of calculation but confused how to do it? Thats my code please review it and give me solution.If there is any other idea to do that then suggest me
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
import React, { useState } from 'react'
export default function Calculator ()
{
let [ cal, setCal ] = useState( "" );
let [ result, setResult ] = useState( "" );
let updcal = value =>
{
setCal( cal + value );
}
let calculate = () =>
{
setCal( eval( cal ).toString() );
}
let del = () =>
{
let value = cal.slice( 0, -1 );
setCal( value );
}
let clear = () =>
{
setCal( '' );
}
return (
<div className="box">
<div className="calculator">
<div className="display">
{result ? <span>{cal }</span> : ' '}
{cal || "0 "}
</div>
<div className="line"></div>
<div className="buttongrp fw-bold">
<button className='btn btn-outline-primary' onClick={clear}>AC</button>
<button className='btn btn-outline-primary' onClick={del}> <i className='fa far fa-times-rectangle fa-fw' id='cross'></i> </button>
<button className='btn btn-outline-primary' onClick={() => updcal( '%' )}>%</button>
<button className='btn btn-outline-primary' onClick={()=>updcal('/')}> <i className='fa fa-divide'></i>/</button>
<button className='btn btn-outline' onClick={() => updcal( '7' )}>7</button>
<button className='btn btn-outline' onClick={() => updcal( '8' )}>8</button>
<button className='btn btn-outline' onClick={()=>updcal('9')}>9</button>
<button className='btn btn-outline-primary' onClick={() => updcal( '*' )}>x</button>
<button className='btn btn-outline'onClick={() => updcal( '4' )}>4</button>
<button className='btn btn-outline'onClick={() => updcal( '5' )}>5</button>
<button className='btn btn-outline'onClick={()=>updcal('6')}>6</button>
<button className='btn btn-outline-primary' onClick={() => updcal( '+' )}>+</button>
<button className='btn btn-outline'onClick={() => updcal( '1' )}>1</button>
<button className='btn btn-outline' onClick={() => updcal( '2' )}>2</button>
<button className='btn btn-outline'onClick={()=>updcal('3')}>3</button>
<button className='btn btn-outline-primary' onClick={()=>updcal('-')}>-</button>
<button className='btn btn-outline'onClick={()=>updcal('0')}>0</button>
<button className='btn btn-outline' onClick={() => updcal( '.' )}>.</button>
<button className='btn btn-outline-primary' id='equal' onClick={calculate} >=</button>
</div>
</div>
</div>
)
}