I'm getting an error from Babel when trying to compile my JSX code into JS. I'm new to react so apologies if this is an obvious issue, I wasn't able to find anything about it that seemed related. I'm attempting to use props in this chunk of code, and pass a pageTitle prop to my FieldContainer component. This is giving me an issue, though, that isn't letting the code compile to JS. I discovered in my searching that prop values should be passed between {}, but adding these did not help. Any ideas? Thanks!
It's hard to tell what you are trying to do here, but as the error says, the value of an attribute must be an expression {foo} or quoted text "foo".
In this case
Child={<LoginForm />}
or
Child={LoginForm}
is probably what you want.
I got this error because I failed to quote a property inside of the JSX:
<span aria-hidden=true ...
should have been
<span aria-hidden="true" ...
Just faced same issue, I was writing
component="Contacts"
resolved it by rewriting it as:
component={Contacts}
Related
I am trying to set a background color on my div based on a a color send down by my server. I can't solve this with classes because the color value could be any legal color value. However, VSCode is giving me an error when I type the following. Is EJS not allowed to use with css related stuff?
<div style="background-color: <%= display_color %>;"></div> // Error: property value expected
This is an ESLint error. ESLint is a linting tool. It can help you find and fix (mostly/usually) stylistic problems with your code. It's highly configurable, and can also be used to auto-fix some problems for you.
As you already found, you can disable the lint warning for a single site/line like so:
<div <% /* eslint-disable css-propertyvalueexpected */ %> style='background-color: <%= display_color %>;'></div>
If you want to disable the warning once and for all, create an ESLint configuration file and do it there.
If you haven't installed the ESLint NPM package to use it that way, you're probably getting this because of one of your VS Code extensions.
I have a simple list component in Vue2 with the ability to add/delete items. My issue was that when I switched from a regular HTML element to material-ui (https://vuematerial.io/), my input-clearing functionality broke.
This is what it looked like:
With the regular HTML element, I was simply targeting the element by ID (from within the methods of my component script) and assigning it an empty string to clear it, as so:
if (input.value !== '') {
this.items.push({
text: input.value
})
input.value = ''
}
I found the solution, which I'll answer below, but again, my question was: How do I clear the field when using a material-ui element? And the bonus question, which I haven't fully answered for myself: Why did it break?
So, first the "how" to make it work:
I needed to set a "v-model" attribute on my element (I called it "inputField"), and then initialize it to empty within the component's data properties, and THEN in my component methods "addInput" function, I had to set "this.inputField = ''" instead of "input.value = ''".
To illustrate:
So, that works. Here's the result:
Now, that just leaves the question of exactly how this all works, and why the method which worked for a regular HTML failed on ? I'm not sure, and I'd welcome an explanation/education from anyone who can explain!
Vue DevTools for Chrome seems to give a hint:
"Mdclearable" seems intuitively to be related; this property is set to false. Is that something to do with it? I'm not sure.
Learning a bit more about Vue's "v-model" and reactivity was also helpful in solving this.
Again, additional comments welcome to help elucidate what is going on here! And I hope this Q&A will help someone else possibly avoid some frustrations in future.
<textbox id="nextTitleTextbox" readonly="true" value="#bind(ivm.inventory.successorTitleName)" />
<button id="nextTitleButton" label="..." mold="trendy" onClick="#command('chooseFormerOrSuccessor', isFormer = false)"/>
<a id="nextTitleHrefView" href="/inventory_new.do?method=edit&docUID=${ivm.inventory.successorTitleName}">view</a>
<a id="nextTitleHrefHistory" href="javascript:showRenamingHistory(${ivm.inventory.successorTitleName},${ivm.inventory.successorTitleName})">history</a>
The problem is in 'a' tags. Textbox and buttons works fine, but links in 'a' tags do not catch information from binding, so link there looks like /inventory_new.do?method=edit&docUID=. I really don't understand what's wrong here, because I tried a lot of combination and something similar is working on other pages. Where is mistake in this binding?
I even tried to put string from zscript
<zscript>
String successorTitleHref = "/inventory_new.do?method=edit&docUID=" + ivm.inventory.successorTitleName;
</zscript>
But got exception:
Typed variable declaration : Class or variable not found: ivm.inventory.replacementTitleName.
Also, it's supported controls, that locates in separate file, and every control adding with use derective.
Binding in ZK has nothing to do with variable replacement. #bind() doesn't mean you can use ${...}. The two are completely separate concepts even though both are called "EL Expression" in the manual. But binding EL Expression and ZUML EL Expressions are two different things.
To allow access to ivm in a zscript, you need to define this variable somewhere in the script. One way is to instantiate it:
IVM ivm = new IVM();
or you can use a custom variable resolver.
I'm getting the following error in Eclipse juno:
Attribute value (POST) uses wrong case character
in the following line inside one of my HTML files:
<form action="http://allteamz.us5.list-manage.com/subscribe/post"
method="POST" id="mc-embedded-subscribe-form">
Is there a way to tell eclipse to "ignore" this error? Tried a few things but nothing seems to be working..
Go to Windows>>Preferences>>Web>>HTML Files>>Validation. A list should be shown and there should exist a title in bold called "Attributes". Selecting "Ignore" for the option "Attribute value using wrong case character" should solve it.
According to W3Schools the allowed values for the method attribute in a form element are only 'get' and 'post', lower case, so I think a better solution is change to lower case. This is strange to me because everywhere else these methods seem to be capitalized.
Eclipse was acting funky but after the restart the normal validation-ignore worked.
Go to Eclipse (or Window) -> Preferences -> Validation -> HTML Syntax Validator, and then 'uncheck' both manual and build
Instead of ignoring the issue through Eclipse configuration try to use proper tag .
This error comes if something like this written
< div onClick="..." > < /div>
Here one need to write onclick="" ; C in lower case .
Eclipse PDT is outputting errors every time it encounters a Return statement outside a function or method. See below the exact error message:
Cannot return from outside a function or method.
As an example I am including a code snippet below:
<form onsubmit="insertAbbr();return false;" action="#">
Eclipse doesn't like the return false; inside the tag.
After a lot of research I found a number of suggestions on how to fix it:
Attempt 1: call a Javascript function to return false
<form onsubmit="insertAbbr();javascript: function () {return false;};" action="#">
Same error.
Attempt 2: change the way I call the Javascript function
<form onsubmit="insertAbbr();javascript: return false;" action="#">
Same error.
And to add to the confusion, when I do check on all major browsers, the original syntax with return false; works without any errors.
Can anyone help me figure out how to resolve this issue? If I can help it, I would like to avoid turning off the validation or hiding the error in Eclipse.
Unfortunately, this appears to be a known bug in Eclipse:
https://bugs.eclipse.org/bugs/show_bug.cgi?id=353209
I haven't been able to find a workaround, but at least this confirms that it's not something you're doing wrong.