title: How to show Calculation History in React Js Calculator?
body: <p>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</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js&quot;&gt;&lt;/script&gt;
  import React, { useState } from 'react'
  
  export default function Calculator ()
  {
     let [ cal, setCal ] = useState( &quot;&quot; );
      let [ result, setResult ] = useState( &quot;&quot; );
  
      let updcal = value =&gt;
      {
          setCal( cal + value );
         
      }
      let calculate = () =&gt;
      {
          setCal( eval( cal ).toString() );
      }
      let del = () =&gt;
      {
          let value = cal.slice( 0, -1 );
          setCal( value );
      }
      let clear = () =&gt;
      {
          setCal( '' );
      }
      return (
        
        &lt;div className=&quot;box&quot;&gt;
            &lt;div className=&quot;calculator&quot;&gt;
                &lt;div className=&quot;display&quot;&gt;
                      {result ? &lt;span&gt;{cal }&lt;/span&gt; : ' '}
                      {cal || &quot;0 &quot;}
                &lt;/div&gt; 
                &lt;div className=&quot;line&quot;&gt;&lt;/div&gt;
                  &lt;div className=&quot;buttongrp fw-bold&quot;&gt;
                      &lt;button className='btn btn-outline-primary' onClick={clear}&gt;AC&lt;/button&gt;
      &lt;button className='btn btn-outline-primary' onClick={del}&gt; &lt;i className='fa far fa-times-rectangle fa-fw' id='cross'&gt;&lt;/i&gt;  &lt;/button&gt;
                      &lt;button className='btn btn-outline-primary' onClick={() =&gt; updcal( '%' )}&gt;%&lt;/button&gt;
                      &lt;button className='btn btn-outline-primary' onClick={()=&gt;updcal('/')}&gt; &lt;i className='fa fa-divide'&gt;&lt;/i&gt;/&lt;/button&gt;
                      &lt;button className='btn btn-outline' onClick={() =&gt; updcal( '7' )}&gt;7&lt;/button&gt;
                      &lt;button className='btn btn-outline' onClick={() =&gt; updcal( '8' )}&gt;8&lt;/button&gt;
                      &lt;button className='btn btn-outline' onClick={()=&gt;updcal('9')}&gt;9&lt;/button&gt;
                      &lt;button className='btn btn-outline-primary' onClick={() =&gt; updcal( '*' )}&gt;x&lt;/button&gt;
                      &lt;button className='btn btn-outline'onClick={() =&gt; updcal( '4' )}&gt;4&lt;/button&gt;
                      &lt;button className='btn btn-outline'onClick={() =&gt; updcal( '5' )}&gt;5&lt;/button&gt;
                      &lt;button className='btn btn-outline'onClick={()=&gt;updcal('6')}&gt;6&lt;/button&gt;
                      &lt;button className='btn btn-outline-primary' onClick={() =&gt; updcal( '+' )}&gt;+&lt;/button&gt;
                      &lt;button className='btn btn-outline'onClick={() =&gt; updcal( '1' )}&gt;1&lt;/button&gt;
                      &lt;button className='btn btn-outline' onClick={() =&gt; updcal( '2' )}&gt;2&lt;/button&gt;
                      &lt;button className='btn btn-outline'onClick={()=&gt;updcal('3')}&gt;3&lt;/button&gt;
                      &lt;button className='btn btn-outline-primary' onClick={()=&gt;updcal('-')}&gt;-&lt;/button&gt;
                      &lt;button  className='btn btn-outline'onClick={()=&gt;updcal('0')}&gt;0&lt;/button&gt;
                      &lt;button className='btn btn-outline' onClick={() =&gt; updcal( '.' )}&gt;.&lt;/button&gt;
                      &lt;button className='btn btn-outline-primary' id='equal' onClick={calculate} &gt;=&lt;/button&gt;
                  &lt;/div&gt;
                  
                    
  
    &lt;/div&gt;
        &lt;/div&gt;
      
    )
  }
  </code></pre>