title: making React work together with math.js library
body: <p>for some reason my React component seems not to be working with the math.js library. Whenever I try to get the output of the following code on the console (without resetting the state it seems to be working fine and correct value gets outputted in the console), but if I try to apply the result of the <code>evaluate()</code> function in React component with applying it in the <code>setTotal()</code> nothing happens.</p>
  <p>Could you please let me know what am I doing wrong in here and why it is not working?</p>
  <p>Here is my <a href="https://codepen.io/konstantinkrumin/pen/eYJvwBz" rel="nofollow noreferrer">pen</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function App() {
    const expression = "3+5*6-2/4"
    const { total, setTotal } = React.useState("0")
    
    function handleCalc() {
      const total = math.compile(expression)
      const result = total.evaluate()
      setTotal(result)
    }
    
    return (
      &lt;div&gt;
        &lt;h1&gt;Calculator&lt;/h1&gt;
        &lt;p&gt;{`Expression: ${expression}`}&lt;/p&gt;
        &lt;button onClick={handleCalc}&gt;Calculate&lt;/button&gt;
        &lt;h1&gt;{total}&lt;/h1&gt;
      &lt;/div&gt;
    )
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"))</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/7.0.1/math.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>