How to Use amp-state in JSX?

Question

I'm working on creating Google amp-page in a React project, and need to fetch JSON after a click.

A/C to amp.dev , i can use amp-state to fetch remote data

as

<amp-state id="shirts" [src]="'/shirts/sizesAndPrices?sku=' + selected.sku" />

How can i do the same in JSX, as writing [src] in such format leads to error

Any suggestion will be helpful. Thanks in advance

Answer 1

You can replace [src] with data-amp-bind-src . The latter syntax has been introduced for JSX syntax compatibility.

Answer 2

I don't know this is the right way, but I think, this can be a turn around If there is a better way, or if this is not recommended in any way, please comment

I needed to toggle visibility of option based on the selected option

<amp-selector
    layout="container"
    class="radio-selector"
    on="select: AMP.setState({
    selectedOption: event.targetOption,
})">
        <div option="a_show">Option A</div>
        <div option="b_show">Option B</div>
        <div option="c_show">Option C</div>
</amp-selector>
<div className="options"
    dangerouslySetInnerHTML={{
        __html: `
            <p [class]="selectedOption == 'a_show' ? 'show' : 'hide'" class="show">a</p>
            <p [class]="selectedOption == 'b_show' ? 'show' : 'hide'" class="hide">b</p>
            <p [class]="selectedOption == 'c_show' ? 'show' : 'hide'" class="hide">c</p>
        `
        }}
/>