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
You can replace [src] with data-amp-bind-src. The latter syntax has been introduced for JSX syntax compatibility.
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>
`
}}
/>
Related
I my react app, I am using react markdown for rendering the blog content. How can we add multiple classes to the ReactMarkdown. At the moment I have used dataArea class alone, but i would need to use below classes for styling purpose. Could someone please advise ?
.blogImageSection
.dataArea
.dataDate
.tags
.readmoreLink
.dataArea p
. views
csb link for reference : https://codesandbox.io/s/great-bardeen-9lsog5?file=/src/App.js
// react markdown usage:
{ popularResults.map (({id, blogdetails, tags, createdAt }) => (
<ReactMarkdown className='dataArea' remarkPlugins={[remarkGfm]}>{blogdetails}
</ReactMarkdown>
))}
This is the normal blog where I have used the above classes without using react markdown
<a key={id} href="my url">
<div key={id} className='blogImageSection'>
<img alt="id" src={photo} />
<div key={id} className='dataArea'>
<span key={id} className='dataDate'>{date}</span>
<span className='tags'>cypress</span>
<h3>{heading}</h3>
<p>
Best heading added here.
The most relevant data added here.
Greatest of all time. Print the whole text here.
Ideas are always usefull....
</p>
<a href="_blank" className="readmoreLink">
Read more →
</a>
<span className='views'>
{topViews > 999 ? (topViews / 1000).toFixed(2) + "K" : topViews}
</span>
</div>
</div>
</a>
you can add all classes like this:
className='dataArea blogImageSection dataArea dataDate tags readmoreLink dataArea views'
I have an expression that looks for form errors and appends a div if once bubbles up:
{touched && normalizedError && (
<div className="visible alert-error text-xs text-red-500" role="alert">
{normalizedError}
</div>
)}
I'd like to refactor this and always display the div beneath my input elements but use the invisble class to hide them from the user unless an error is returned—in which case I'd conditional add the visible class.
What's the best way to accomplish this?
There are several ways to accomplish what you want, the easiest would be to add the conditional in the className itself
<div className={`alert-error text-xs text-red-500 ${touched && normalizedError ? 'visible' : 'invisible'}`} role="alert">
{normalizedError}
</div>
There are many different ways of getting this done.
1.Inline inside the class
<div className={`... ${touched && normalizedError ? 'visible' : 'invisible'}`}>
{normalizedError}
</div>
2. Using a variable
let dependentClass = touched && normalizedError ? 'visible' : 'invisible';
className={`... ${dependentClass }`}
3. Using clsx
<div className={clsx('...',`${touched && normalizedError ? 'visible' : 'invisible'}`)}>
{normalizedError}
</div>
<div className="someClass">
<img src={this.getImage(item.image_url)}/>
</div>
Is there a way to check if the source or image_url is empty then if it is, return a different source or image url?
Thanks
try
<div className="someClass">
<img src={item.image_url !== '' ? this.getImage(item.image_url) : 'different url'}/>
</div>
Try this as an improvement of the previous ans.
<div className="someClass">
<img src={item.image_url !== null ? this.getImage(item.image_url) : 'different url'}/>
</div>
I'm hiding or showing a div when a button is clicked.
I want to change the text in the link to say "show" / "hide".
I have it working but is there a better way to change the text rather than checking for the variable on two seprate spans.
<a ng-click="showHint = !showHint"><span ng-if="showHint">Hide</span><span ng-if="!showHint">Show</span> tips</a>
<div ng-if="showHint">
<p>
Hint text Hint text Hint text Hint text
</p>
</div>
You can use conditional operator with interpolation.
<a ng-click="showHint = !showHint">{{ showHint ? "Hide" : "Show"}}tips</a>
Fiddle
Check this, hope it works for you:
<span ng-bind="showHint ? 'Hide' : 'Show'"></span>
Complete Snippet:
<a ng-click="showHint = !showHint">
<span ng-bind="showHint ? 'Hide' : 'Show'"></span> tips
</a>
OR
<a ng-click="showHint = !showHint">
<span ng-bind="showHint ? 'Hide tips' : 'Show tips'"></span>
</a>
I'd like to do something like Angular does with ng-class. I'm using react-tabs library (https://github.com/mzabriskie/react-tabs) and now I want to be able to change the background of the selected tab.
The library comes with a default effect for the selected tab but I want personalize it.
if you're using an es6 transpiler you can use template strings and a ternary:
className={`base-class ${this.props.isActive? 'is-active' : ''}`}
This works:
<div className={this.props.canChange ? "change-button" : "change-button gray-out"}>
blah
</div>
Basically classname is a property of the node.
Just wrap your <Tabs> element with an element of your own <div className="my-tabs"> and go from there! You can use the aria-selected to style the selected state.
Other option is using ternary with Array join, check:
<my-element
className={[
'default-class',
isClass1 ? 'class-1' : '',
isClass2 ? 'class-2' : '',
isClassN ? 'class-n' : ''
].join(' ')}
/>
In this way you can avoid concating strings and manage multiple classes at the same time :)