I am trying to wrap html around inner div only when some condition is met. But when I run the script, it says Module build failed: SyntaxError Unexpected token. I tried to use conditional rendering.
return (
<Fragment>
<div>
{
(true) ? <div class="imghvr-wrapper"> : ''
}
<div class="imghvr">
<div class="imghvr-overlay imghvr-anim-none imghvr-anim-single">
</div>
{
(true) ? </div> : ''
}
</div>
</Fragment>
);
Like this:
const myComponent = () => {
const myCondition = true;
const child = (
<div className="imghvr">
<div className="imghvr-overlay imghvr-anim-none imghvr-anim-single" />
</div>
);
return (
myCondition ? <div className="imghvr-wrapper">{ child }</div> : child
);
};
You can't split tags like this: myCondition ? <div className="imghvr-wrapper"> : null you should always close your tags. For example that code is valid: (true) ? <div className="imghvr-wrapper"/> : '' because tag is closed
Related
console.log(data.allShopifyProductVariant.nodes[0].product.title)
return (
<div>
<div>
{data.allShopifyProductVariant.nodes.map(node => {
<div>
{node.product.title}
</div>
})}
</div>
</div>
)
}
export const query = graphql`
query CollectionQuery {
allShopifyProductVariant(filter: {product: {productType: {in: "20 lb. Plotter Paper"}}}) {
nodes {
compareAtPrice
sku
price
product {
title
images {
gatsbyImageData(width: 150)
}
productType
}
}
}
}`
export default Collection;
Expecting this function to return the product title, for some reason it returns nothing. I've tried using dangerously set innerhtml but nothing comes up, no error. I am able to console.log the {node.product.title} and it returns exactly what I want to display but for some reason it is not rendering to the div. Any help is appreciated, thanks in advance :D
You are missing the return statement:
return (
<div>
<div>
{data.allShopifyProductVariant.nodes.map(node => {
return <div>
{node.product.title}
</div>
})}
</div>
</div>
)
Or using the implicit return:
return (
<div>
<div>
{data.allShopifyProductVariant.nodes.map(node => (
<div>
{node.product.title}
</div>
))}
</div>
</div>
)
i
I don't succeed to fix the bug
I need that in tablle show buttom
I copy the code from fluent UI https://developer.microsoft.com/de-de/fluentui#/controls/web/detailslist/customitemcolumns
enter image description here
but this in give bug in onrenderItem because the declared columns
enter image description here
i try this but have bug
enter image description here
i sucsses to fix the bug
return (
<div>
<div>
<div className="ms-Grid">
<div className="ms-Grid-row">
<DetailsList
items={item}
columns={columns}
setKey='set'
onRenderItemColumn={renderItemColumn}
/>
</div>
</div>
</div>
</div>
);
const renderItemColumn = (item: any, index: any, column: any) => {
let fieldContent = item[column.fieldName];
switch (column.key) {
case 'custem':
return <Link href="https://developer.microsoft.com/en-us/fluentui#/controls/web/link" >ukbkkbio</Link></span>
default:
return <span >{fieldContent}</span>;
}
}
https://codesandbox.io/s/rough-cache-vgl3p?file=/src/App.tsx
I have the following code to display an image inside of a carousel
<div class="carousel container px-0" *ngIf="module.type === 3">
<div class="container px-0 position-absolute left">
<div [ngStyle]="{ 'background-image': 'url(' + module.urlLeft + ')'}" class="img-container" (click)="decrease(i)">
</div>
</div>
<div class="container px-0 position-absolute right">
<div [ngStyle]="{ 'background-image': 'url(' + module.urlRight + ')'}" class="img-container" (click)="increase(i)">
</div>
</div>
<div [ngStyle]="{ 'background-image': 'url(' + module.urlCenter + ')'}" class="img-container">
</div>
</div>
module is an array's object containing several image urls, the array contains multiple modules:
urlLeft: 'url'
urlCenter: 'url'
urlRight: 'url'
How do I switch through all images of this specific module (there might be several modules with carousels), e.g. by assigning the image from urlLeft to urlCenter, image from urlCenter to urlRight & image from urlRight to urlLeft?
I tried the following, but obviously this won't work since as soon as urlLeft is urlCenter, urlRight will also be urlCenter:
decrease(index) {
this.modules[index].urlLeft = this.modules[index].urlCenter;
this.modules[index].urlCenter = this.modules[index].urlRight;
this.modules[index].urlRight = this.modules[index].urlLeft;
}
With ES6 it will be easy , Try this :
const { urlLeft , urlCenter , urlRight } = this.modules[index];
this.modules[index].urlLeft = urlCenter;
this.modules[index].urlCenter = urlRight;
this.modules[index].urlRight = urlLeft;
Working Code Snippet:
var jsonObj = { first : 1 , second : 2 , third : 3 };
console.log( 'Before Exchange ====> ' , jsonObj);
const { first , second , third } = jsonObj;
jsonObj.first = second;
jsonObj.second = third;
jsonObj.third = first;
console.log( 'After Exchange ====> ' ,jsonObj);
You can also try an auxiliary variable to save urlLeft temporarily.
decrease(index) {
const auxVar = this.modules[index].urlLeft;
this.modules[index].urlLeft = this.modules[index].urlCenter;
this.modules[index].urlCenter = this.modules[index].urlRight;
this.modules[index].urlRight = auxVar;
}
I have a DIV with ng-show.
When I run ng-click on an element outside of the DIV, it works fine and I can hide it.
When I run ng-click on an element inside of the DIV, it does not work. I can see the variable beeing changed when i console.log it, but the view will not update.
I have tried to use $scope.$apply() but it gets an error and says it is already running $apply().
Parts of controller:
$scope.selectedActivity = {
"dayNr": 0,
"actNr": 0
};
$scope.resetSelectedActivity = function () {
console.log("SelAct: ", $scope.selectedActivity);
$scope.selectedActivity.dayNr = -1;
$scope.selectedActivity.actNr = -1;
console.log("SelAct: ", $scope.selectedActivity);
};
$scope.setSelectedActivity = function (dayNr, actNr) {
console.log("SelAct: ", $scope.selectedActivity);
$scope.selectedActivity.dayNr = dayNr;
$scope.selectedActivity.actNr = actNr;
console.log("SelAct: ", $scope.selectedActivity);
};
Parts of HTML:
<div ng-repeat="x in xs">
<ion-scroll>
<div ng-repeat="y in ys track by $index">
<div ng-click="setSelectedActivity($parent.$index, $index)">
<!--THE PROBLEM IS HERE-->
<div ng-show="selectedActivity.dayNr == $parent.$index && selectedActivity.actNr == $index">
<div>
<!--THIS LOGS OUT CORRECT VALUES BUT NG-SHOW IS NOT UPDATED-->
<div ng-click="resetSelectedActivity()">
Reset
</div>
</div>
</div>
<div>
<img src="img/checkButtonOverlay.png" />
</div>
</div>
<!--THIS LOGS OUT CORRECT VALUES AND NG-SHOW _IS_ UPDATED-->
<button ng-click="resetSelectedActivity()">reset</button>
</div>
</ion-scroll>
</div>
Please note that i have removed A LOT from the code because of confidentiality, but the principle should be the same.
Thank you!
Found the problem!
I had a ng-click that showed the DIV outside. When I clicked both ng-clicks got entered.
So First resetSelectedActivity() and then it got set again in setSelectedActivity().
Fixed it using:
<div ng-click="resetSelectedActivity($parent.$index, $index, $event)">
...
</div>
and:
$scope.setSelectedActivity = function (dayNr, actNr, event) {
$scope.selectedActivity.dayNr = dayNr;
$scope.selectedActivity.actNr = actNr;
//This cancel the mouseclick
event.stopPropagation();
};
I have the following code block that nearly works. It completes the outer #foreach cycle and starts each sub #foreach cycle. It puts out the first image in each pair but then outputs
"} if(countItem==1) (" which can be read in the browser.
Any advice would be appreciated
Craig
Code:-
#inherits umbraco.MacroEngines.DynamicNodeContext
#{
int level = 2;
var subjects = #Model.AncestorOrSelf(level).Children.Where("nodeTypeAlias == \"SideGallerySectionHeading\"");
int countItem = 1;
if (subjects != null) {
<div class="highslide-gallery">
#foreach(var subjectName in subjects){
<h3>#subjectName.Name</h3>
foreach(dynamic image in subjectName.Children) {
if(countItem==1){<div class="picrowdiv">}
<div class="picdiv">
<a href="#image.Media("itemLarge","umbracoFile")" class="highslide" onclick="return hs.expand(this)">
<img src="#image.Media("itemThumbnail","umbracoFile")" width="100" height="100" alt="test"></a>
<div class="highslide-caption">
#image.bodyText
</div>
<p>#image.caption</p>
</div>
if(countItem==1){</div>}
countItem++;
if(countItem>2){countItem=1;}
}
}
</div>
}
}
You may try to rewrite the line
if(countItem==1){</div>}
into
#if(countItem==1){
</div>
}
Razor is quite picky about closing your html tags so you may have to refactor to make this work. I like ternary operators for stuff like this
try
#(countItem==1 ? "</div>")
#countItem++;
#(countItem>2 ? countItem=1)
you can also do else with a :
so
#(countItem==1 ? "</div>" : "")