title: React Calculator can't find an algorithm to make calculations with different consecutive symbols
body: <p>I have figured out an 'algorithm' to make consecutive calculations with the same symbol i.e. 2 + 3 + 5 = ... or 1 * 2 * 4 = ... However I'm stuck and can't change it to work with different symbols, for example: 2 + 2 - 1 or  2 * 3 / 2 etc.</p>
  <p>I tried to write it myself for the most part with occasional help from online sources. Is it reinventing the wheel or am I on the 'more or less' right path?</p>
  <p>this part wroks with the same symbols:</p>
  <pre><code>localInput += value;
  
  if(value === '+' || value === '-' || value === '*'|| value === '/' || value === '='){
    
    let x = localInput.slice(0, localInput.length - 1)
    parseFloat(x);
    
    if(!isNaN(x)){
      arr.push(parseFloat(x));
    }
    localInput = '';
    
  }
  if(arr.length === 2) {
    
    local_left = Calculate(arr[0], token, arr[1]);
         
    arr = [];
    
    arr[0] = local_left;
    
    
  }
  if(value === '='){
    result = local_left;
    
    setExpression(prevX =&gt; prevX + result);
    str = result;
  }
  </code></pre>
  <hr />
  <p>Entire program below:</p>
  <pre><code>import './App.css';
  import React, {useState} from 'react';
  
  
  let token = '';
  let first = 0;
  let last = 0;
  let result = 0;
  let localInput = '';
  let arr = [];
  let str = '0';
  let local_left = 0;
  
  export default function App() {
    const [expression, setExpression] = useState('0');
    
    function Last_symbol(word) {
        return word.charAt(word.length - 1);
    }
    function Calculate(f, t, l) {
        let res = 0;
        if(t === '+'){
          res = parseFloat(f) + parseFloat(l);
        }
        else if(t === '-'){
          res = parseFloat(f) - parseFloat(l);
        }
        else if(t === '*'){
          res = parseFloat(f) * parseFloat(l);
        }
        else if(t === '/'){
          res = parseFloat(l) === 0 ? &quot;Cannot divide by zero&quot; : parseFloat(f) / parseFloat(l);
        }
        return res;
      }
  
    function Clear() {
      token = '';
      first = 0;
      last = 0;
      result = 0;
      localInput = 0;
      arr = [];
      local_left = 0;
      
      setExpression(prevX =&gt; prevX = '0');
      
      str = '0';
    }
    function GetInput(e){
      
      const {name, value} = e.target;
      if(str === '0'){
        str = value;
        
      }
      
      else if(value === '+' || value === '-' || value === '*' || value === '/'){
        str = value;
      }
      else{
        let x = ''
        str.includes('+') || str.includes('-') || str.includes('*') || str.includes('/') ? str = x += value: str += value;
      }
      
      
      
      setExpression(prevX =&gt; prevX === '0' ? prevX = value : prevX + value);
      
      
      
         
      
          
  
      if(value === '+'){
        token = '+';
        
      }else if(value === '-'){
        token = '-';
        
      }else if(value === '/'){
        token = '/';
        
      }else if(value === '*'){
        token = '*';
        
      }else if(value === '.'){
        
      }
      
      
      localInput += value;
      
      if(value === '+' || value === '-' || value === '*'|| value === '/' || value === '='){
        
        let x = localInput.slice(0, localInput.length - 1)
        parseFloat(x);
        
        if(!isNaN(x)){
          arr.push(parseFloat(x));
        }
        localInput = '';
        
      }
      if(arr.length === 2) {
        
        local_left = Calculate(arr[0], token, arr[1]);
             
        arr = [];
        
        arr[0] = local_left;
        
        
      }
      if(value === '='){
        result = local_left;
        
        setExpression(prevX =&gt; prevX + result);
        str = result;
      }
  
      
      
    }
    return (
        &lt;div className='calc'&gt;
          &lt;div className='screen'&gt;
            &lt;p&gt;{expression}&lt;/p&gt;
            &lt;h1&gt;{str}&lt;/h1&gt;
          &lt;/div&gt;
          
          &lt;div className='btn-section'&gt;
            &lt;button className='ac' onClick={Clear}&gt;AC&lt;/button&gt;
            &lt;button className='sgn' value='/' onClick={GetInput}&gt;/&lt;/button&gt;
            &lt;button className='sgn' value='*' onClick={GetInput}&gt;*&lt;/button&gt;
            &lt;button value='7' onClick={GetInput}&gt;7&lt;/button&gt;
            &lt;button value=&quot;8&quot; onClick={GetInput}&gt;8&lt;/button&gt;
            &lt;button value=&quot;9&quot; onClick={GetInput}&gt;9&lt;/button&gt;
            &lt;button className='sgn' value='-' onClick={GetInput}&gt;-&lt;/button&gt;
            &lt;button value=&quot;4&quot; onClick={GetInput}&gt;4&lt;/button&gt;
            &lt;button value=&quot;5&quot; onClick={GetInput}&gt;5&lt;/button&gt;
            &lt;button value=&quot;6&quot; onClick={GetInput}&gt;6&lt;/button&gt;
            &lt;button className='sgn' value='+' onClick={GetInput}&gt;+&lt;/button&gt;
            &lt;button value=&quot;1&quot; onClick={GetInput}&gt;1&lt;/button&gt;
            &lt;button value=&quot;2&quot; onClick={GetInput}&gt;2&lt;/button&gt;
            &lt;button value=&quot;3&quot; onClick={GetInput}&gt;3&lt;/button&gt;
            &lt;button className='equal-sgn' value='=' onClick={GetInput}&gt;=&lt;/button&gt;
            &lt;button value=&quot;0&quot; className='zero' onClick={GetInput}&gt;0&lt;/button&gt;
            &lt;button className='sgn' value='.' onClick={GetInput}&gt;.&lt;/button&gt;
          &lt;/div&gt;
          
    
        &lt;/div&gt;
      );
  }
  </code></pre>