title: React hooks state : Undefined
body: <p>A novice at React over here, struggling with a basic useState hooks program. A simple functional component created named CounterHooks that aims at making a simple +-1 counter.</p>
  <p>here is the  code :</p>
  <p>The actual component is this.</p>
  <p><code>CounterHooks.js</code></p>
  <pre><code>    import React, { useState } from 'react'
      export default function CounterHooks({initialCount})  {
        const [count , setCount ] = useState(initialCount) 
        return (
          &lt;div&gt;
                  &lt;button onClick = {() =&gt;   setCount(  prevCount =&gt; prevCount -1 ) }&gt;-&lt;/button&gt;
                   {count}
                  &lt;button onClick = {  () =&gt; setCount(prevCount =&gt; prevCount +1 ) } &gt;+&lt;/button&gt;
          &lt;/div&gt;
      
        )
      }
  </code></pre>
  <p>The component where it gets rendered.
  <code>App.js</code></p>
  <pre><code>    import React from 'react';
      
      
      import CounterHooks from './CounterHooks'
      function App() {
        
        console.log(&quot;Render App&quot;)
        
        return (
          &lt;&gt;
          CounterHooks
          &lt;CounterHooks intialCount = {0} /&gt;
          &lt;/&gt;
      
        ) 
      }
  
  export default App;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/AzTrC.png" rel="nofollow noreferrer">The output rendered is there in the image</a></p>
  <p>and when i try to hit any of the buttons ,the output changes to NaN.</p>
  <p>Please help me out , also let me know if  any other piece of necessary code is required for further clarification.</p>
  <p>Much thanks.</p>