<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/40592585/68524139-14ac3400-02fe-11ea-9b73-30cabb19e1dc.png"><img src="https://user-images.githubusercontent.com/40592585/68524139-14ac3400-02fe-11ea-9b73-30cabb19e1dc.png" alt="image" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/40592585/68524155-44f3d280-02fe-11ea-8dac-1901b93e0d67.png"><img src="https://user-images.githubusercontent.com/40592585/68524155-44f3d280-02fe-11ea-8dac-1901b93e0d67.png" alt="image" style="max-width: 100%;"></a><br>
How do I write it in JSX</p>
<h2 dir="auto">Example name</h2>
<p dir="auto">experimental-amp</p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">I try to use a sample from <a href="https://ampbyexample.com/dynamic_amp/dynamic_content_after_user-interaction/" rel="nofollow">https://ampbyexample.com/dynamic_amp/dynamic_content_after_user-interaction/</a> without luck.<br>
When I add <code class="notranslate">&lt;div [text]="products[productId] + ' available'"&gt;Please select a product&lt;/div&gt;</code> error while compiling occured <code class="notranslate">SyntaxError: /experimental-amp-app/pages/product.amp.js: Unexpected token (38:5)</code></p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Steps to reproduce the behavior, please provide code snippets or a repository:</p>
<ol dir="auto">
<li>Create amp all</li>
<li>Add "product.amp.js" page with this content:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Head from 'next/head'
import { useAmp } from 'next/amp'

export default () =&gt; {
  const isAmp = useAmp()

  return (
    &lt;&gt;
    &lt;Head&gt;
    &lt;script async custom-element=&quot;amp-bind&quot; src=&quot;https://cdn.ampproject.org/v0/amp-bind-0.1.js&quot;&gt;&lt;/script&gt;
    &lt;/Head&gt;
    &lt;h1&gt;AMP Product&lt;/h1&gt;
    &lt;a href=&quot;https://ampbyexample.com/dynamic_amp/dynamic_content_after_user-interaction/&quot; /&gt;
&lt;amp-state id=&quot;products&quot;
  src=&quot;https://ampbyexample.com/json/products.json&quot;&gt;&lt;/amp-state&gt;

&lt;amp-img on=&quot;tap:AMP.setState({ productId: 0})&quot;
  src=&quot;https://ampbyexample.com/img/red_apple_1_60x40.jpg&quot;
  width=&quot;60&quot;
  height=&quot;40&quot;
  role=&quot;button&quot;
  tabindex=&quot;0&quot;&gt;
&lt;/amp-img&gt;
&lt;amp-img on=&quot;tap:AMP.setState({ productId: 1})&quot;
  src=&quot;https://ampbyexample.com/img/green_apple_1_60x40.jpg&quot;
  width=&quot;60&quot;
  height=&quot;40&quot;
  role=&quot;button&quot;
  tabindex=&quot;0&quot;&gt;
&lt;/amp-img&gt;
&lt;amp-img on=&quot;tap:AMP.setState({ productId: 2})&quot;
  src=&quot;https://ampbyexample.com/img/product1_alt1_60x40.jpg&quot;
  width=&quot;60&quot;
  height=&quot;40&quot;
  role=&quot;button&quot;
  tabindex=&quot;0&quot;&gt;
&lt;/amp-img&gt;
&lt;div [text]=&quot;products[productId] + ' available'&quot;&gt;Please select a product&lt;/div&gt;
&lt;/&gt;)
}"><pre class="notranslate"><code class="notranslate">import Head from 'next/head'
import { useAmp } from 'next/amp'

export default () =&gt; {
  const isAmp = useAmp()

  return (
    &lt;&gt;
    &lt;Head&gt;
    &lt;script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"&gt;&lt;/script&gt;
    &lt;/Head&gt;
    &lt;h1&gt;AMP Product&lt;/h1&gt;
    &lt;a href="https://ampbyexample.com/dynamic_amp/dynamic_content_after_user-interaction/" /&gt;
&lt;amp-state id="products"
  src="https://ampbyexample.com/json/products.json"&gt;&lt;/amp-state&gt;

&lt;amp-img on="tap:AMP.setState({ productId: 0})"
  src="https://ampbyexample.com/img/red_apple_1_60x40.jpg"
  width="60"
  height="40"
  role="button"
  tabindex="0"&gt;
&lt;/amp-img&gt;
&lt;amp-img on="tap:AMP.setState({ productId: 1})"
  src="https://ampbyexample.com/img/green_apple_1_60x40.jpg"
  width="60"
  height="40"
  role="button"
  tabindex="0"&gt;
&lt;/amp-img&gt;
&lt;amp-img on="tap:AMP.setState({ productId: 2})"
  src="https://ampbyexample.com/img/product1_alt1_60x40.jpg"
  width="60"
  height="40"
  role="button"
  tabindex="0"&gt;
&lt;/amp-img&gt;
&lt;div [text]="products[productId] + ' available'"&gt;Please select a product&lt;/div&gt;
&lt;/&gt;)
}
</code></pre></div>
<ol start="3" dir="auto">
<li>See error</li>
</ol>
<h2 dir="auto">Expected behaviour</h2>
<p dir="auto">It should compile or suggest an alternative way how to write such AMP code</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: latest macOS</li>
<li>Browser chrome</li>
<li>Version of Next.js: 8.0.4-canary.24</li>
</ul>
<p dir="auto">Is there any alternative way how to write <code class="notranslate">[text]</code> inside div?</p>