title: Confusion with shared variables in React
body: <p>The "Bad button" only works once, since it's not controlling the same "value" as the "Good button". What am I missing here?</p>
  
  <pre><code>const Test = () =&gt; {
  
    const [value, setValue] = useState(0)
    const [view, setView] = useState()
  
    const add = () =&gt; setValue(value + 1)
  
    const badButton = () =&gt; {
        return (
            &lt;div&gt;
                &lt;button onClick={add}&gt;Bad button&lt;/button&gt;
            &lt;/div&gt;
        )
    }
    return (
        &lt;div&gt;
            {value}
            &lt;button onClick={add}&gt;Good button&lt;/button&gt;
            {view}
            &lt;button onClick={() =&gt; setView(badButton)}&gt;show bad button&lt;/button&gt;
        &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>Thanks for replying, I'm going to use the flag method as suggested. But I would still like to know why the two buttons don't work the same way in this original case.</p>