title: How to use function return value as a state in React?
body: <p>I am learning functional components with React and I have a simple code, which returns 'Nah' when the state value is 0.</p>
  <p>The problem is that this doesn't work during render. Why is that?</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from &quot;react&quot;;
  import { Button } from &quot;react-bootstrap&quot;;
  const Counter = () =&gt; {
    const [count, setCount] = useState(0);
    const formatCount = () =&gt; {
      count === 0 ? setCount(&quot;Nah&quot;) : setCount(0);
    };
  
    // let classes = &quot;badge m-2&quot;;
    // classes += (this.state.count === 0) ? &quot;badge-warning&quot; : &quot;badge-primary&quot;;
  
    return (
      &lt;div&gt;
        &lt;Button className=&quot;badge badge-warning m-2&quot;&gt;-&lt;/Button&gt;
        {this.formatCount()}
        &lt;button&gt;+&lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default Counter;
  
  </code></pre>