title: how to reset react hooks state?
body: <p>I'm a little bit new to react, I read <a href="https://reactjs.org/docs/hooks-intro.html" rel="nofollow noreferrer">this doc about hooks</a> and I have a popover with Show More option. The show more function need to show an extra text when it clicked and hide after popover is gone.</p>
  
  <p>the popover function is:</p>
  
  <pre><code>export default function Popover(props) {
  
    const [viewDetails, setViewDetails] = useState(false);
  
    return (
      &lt;div&gt;
            &lt;h5&gt;{props.title}&lt;/h5&gt;
  
            {viewDetails ?
              'yes, more details here ...' : 'no'}
  
            &lt;span onClick={() =&gt; {setViewDetails(!viewDetails); console.log(viewDetails)}}&gt;Show more&lt;/span&gt;
  
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>and I need a simple local variable which will have 'the state' only when the popover is active.</p>
  
  <p>Why I can't do something like:</p>
  
  <pre><code>export default function Popover(props) {
  
        let viewDetails = false;
  
        return (
          &lt;div&gt;
                &lt;h5&gt;{props.title}&lt;/h5&gt;
  
                {viewDetails ?
                  'yes, more details here ...' : 'no'}
  
                &lt;span onClick={() =&gt; {viewDetails = !viewDetails; console.log(viewDetails)}}&gt;Show more&lt;/span&gt;
  
          &lt;/div&gt;
        );
      }
  </code></pre>
  
  <p>? I see that the value is <strong>always</strong> <code>false</code> when the popover is shown and I can set it to true on click but the <code>{viewDetails ? 'yes, more details here ...' : 'no'}</code> doesn't change</p>