How to use variable/prop in ternary operator
<p>This component renders nicely:</p>

<pre><code>const Footer = () =&gt; {
  let dataDiv = &lt;div&gt;Data is: Some data&lt;/div&gt;;
  return (
    &lt;div&gt;
      {data ? dataDiv : ''}
    &lt;/div&gt;
  )
}
</code></pre>

<p>But if I change the text "some data" with a variable, then the html inside dataDiv is not rendered normally, but as pure text:</p>

<pre><code>const Footer = () =&gt; {
  let data = 'Some data';
  let dataDiv = &lt;div&gt;Data is: {data}&lt;/div&gt;;
  return (
    &lt;div&gt;
      {data ? dataDiv : ''}
    &lt;/div&gt;
  )
}
</code></pre>

<p>I have many different data properties that I want to show or hide depending if it is present or not, how can I solve this in React in a nice way?</p>