I would like to add a part of a classname dynamicall with modules.css.
My classnames are arrow1, arrow2, arrow3, arrow4. So I would like to change the number at the end dynamically.
className={`${styles.box}` + ' styles.arrow' + id}
I tried it liek this and some other ways, but it never worked. How can I add the number (id)?
You're currently adding a string "styles.arrow1" which does not reference the styles object. Instead you can target your className like so
className={`${styles.box} ` + styles["arrow" + id]}
Related
I would like to get the Application name of a specific sObject. For example: I have a custom object called Candidate__c. How to get the Application name of Candidate__c programmatically?
I am open to any approach like using Schema Namespace as well.
I am answering my question. I used Schema.describeTabs() and It works perfectly, but the Doc says the DescribeTabs method returns the minimum required metadata that can be used to render apps ...
Basically, The All Tabs are not included in the list of described tabs. The results are dependent upon the apps that are available to the running user.
// Get tab set describes for each app
List<Schema.DescribeTabSetResult> allApps = Schema.describeTabs();
// Iterate through each tab set describe for each app
for (Schema.DescribeTabSetResult oneApp : allApps) {
System.debug('The tabs/objects associated with the' + oneApp.getLabel() + ' app are:');
List<Schema.DescribeTabResult> appTabs = oneApp.getTabs();
for (Integer i = 0; i < appTabs.size(); i++) {
System.debug((i + 1) + '. Tab Name: ' + appTabs[i].getLabel());
}
}
I have a question I'm sure it's something easy but I don't find solution.
I'm mapping an array of objects with objects looking like this:
{
categoryFr: "Commande",
categoryEn: "Order"
}
Now I want to to print this data in a div so if I do this, it works I get Commande:
<div>{categoryFr}</div>
But I want to dynamically render accordingly to the language I tried :
<div>`c.name${lang}`</div>
<div>`${c.name}${lang}`</div>
But the string categoryFr is printed instead of the value Commande.
you can access it with something like:
<div>{c[name + lang]}</div>
since obj.property (obj.categoryFr) is the equivalent with obj[property] (obj["category" + "Fr"])
I would like to know is there any inbuilt function or something in react for converting SVG style attribute to JSX.
I have style like this:
'opacity:0.647;fill:#cbcbcb;fill-opacity:1;stroke:#cbcbcb;stroke-width:0.26458335;stroke-opacity:1'
I want to convert it into:
{{"opacity":"0.647","fill":"#cbcbcb","fillOpacity":"1","stroke":"#cbcbcb","strokeWidth":"0.26458335","strokeOpacity":"1"}}
Is there any easy way?
I am not sure there exists a React inbuilt tool for this. You could code this yourself and make your own quick tool to transform the syntax. Othwerise, if you don't want to use external websites, you can have a look at the svg-to-jsx module which can be used within your project or via command line
npm install svg-to-jsx
or svgr (https://github.com/gregberge/svgr) for SVG -> React component directly if you prefer
There's no built-in functionality for this. You may convert your styles string into an object using a simple reducer function, and then pass it as a prop.
const str =
"opacity:0.647;fill:#cbcbcb;fill-opacity:1;stroke:#cbcbcb;stroke-width:0.26458335;stroke-opacity:1";
const styles = str.split(";");
const svgStyles = styles.reduce((obj, item, i) => {
const [key, value] = item.split(":");
const updatedkey = key.replace(/-([a-z])/ig, s => s.slice(-1).toUpperCase());
obj[updatedkey] = value;
return obj;
}, {});
console.log(svgStyles);
There's a vscode extension for this called "html to JSX"
Here's the link to the extension:
https://marketplace.visualstudio.com/items?itemName=riazxrazor.html-to-jsx
Just select all of your svg code and then press Ctrl + Shift + P -> Convert HTML to JSX -> Ctrl + S to save
In reactjs I want to display a property.
Normally this isn't really hard to do it, but this time there is a number in the property. And that number depends on how many links the user has added.
This is an example of what my api returns to my react app:
embed_links: ["2"]
embed_links_0_embed_link: ["https://www.url.com"]
embed_links_1_embed_link: ["https://www.url.com"]
The embed_links is an array which says how many urls the user has filled in.
Then you get the urls the user has filled in, and each one has a number in it.
This is where I got stuck. I have tried to display the links with a for loop like this:
let embed_links = this.props.embed_links[0]
for (let i = 0; i < embed_links; i++) {
console.log(this.props.embed_links_[i]_embed_link[0]);
}
But this does not work..
So my question is basically, is there a possibility that you can display properties witch custom variables/numbers in it?
If you are asking access to a dynamical property within your object:
console.log(this.props["embed_links_" + i + "_embed_link"][0]);
Your syntax is wrong, the correct way to write this is as follows:
let embed_links = this.props.embed_links[0]
for (let i = 0; i < embed_links; i++) {
console.log(this.props['embed_links_' + i + '_embed_link][0]);
}
In the example, 'embed_links_' + i + '_embed_link' is the key that you use to select the correct property of object props.
Yes you can use this.props['embed_links_' + i + '_embed_link'][0]
However i would suggest storing your embed links in an array as objects
embed_links_collection: [
{
url:'https://www.url.com',
id: '1'
}
]
This is a cleaner, managable solution - you could also generate your embed_links property as this.props.embed_links_collection.length
You can use for .. in for enumerating this.props properties
I'm attempting to generate the labels of a blog post within the post container as classes, like so:
<div expr:class='"post hentry grid-item" + (data:post.labels any (l => l.name !="" : " " + l.name)' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
Help would be greatly appreciated!
As Lambda expressions in Blogger generate arrays(in some cases boolean and numbers as well) as their results, we need some way to iterate over that array. We can use a b:loop tag for that. Also, as we can't include a b:loop tag in class attribute (otherwise the Blogger's XML parser will show errors) therefore escaping the HTML and including the b:loop tag is one of the way. The code will look like -
<div class='post hentry grid-item <b:loop var="labelName" values="data:post.labels" ><b:eval expr='data:labelName.name + " " ' /></b:loop>' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
</div>