title: Using variables to set attribute values in a tag
body: <p>I am trying to use the <em>vis</em> variable in the display attribute as shown in the code. There are no errors in the console but the paragraph wont hide on pressing the button.</p>
  <pre><code>let vis = false;
  const handleClick = () =&gt; {
      vis = !vis;
      render();
  };
  
  const render = () =&gt; {
      const jsx = (
          &lt;div&gt;
              &lt;h1&gt;Toggle&lt;/h1&gt;
              &lt;p display = {vis ? &quot;block&quot; : &quot;none&quot;} &gt;Hi&lt;/p&gt;
              &lt;button onClick = {handleClick}&gt;{vis ? 'Hide details' : 'Show details'}&lt;/button&gt;
          &lt;/div&gt;
      );
      ReactDOM.render(jsx, document.getElementById(&quot;app&quot;));
  }
  
  render();
  </code></pre>
  <p>Here's a simple and working alternative:</p>
  <pre><code>let vis = false;
  const handleClick = () =&gt; {
      vis = !vis;
      render();
  };
  
  const render = () =&gt; {
      const jsx = (
          &lt;div&gt;
              &lt;h1&gt;Toggle&lt;/h1&gt;
              {vis ? &lt;p&gt;Hi&lt;/p&gt; : ''}
              &lt;button onClick = {handleClick}&gt;{vis ? 'Hide details' : 'Show details'}&lt;/button&gt;
          &lt;/div&gt;
      );
      ReactDOM.render(jsx, document.getElementById(&quot;app&quot;));
  }
  
  render();
  </code></pre>
  <p>The problem is I am not asking for other ways to do it. I just want to understand if I can use <em>vis</em> in <em>display</em> like I did in my first code snippet.</p>