I am trying to learn React. Why can you not use style inside of a return inside of a component?
The Error:
The style prop expects a mapping from style properties to values,
not a string. For example, style={{marginRight: spacing + 'em'}} when
using JSX. This DOM node was rendered by Home.
<div className="single_slide" style="background-image: url(../images/WinterCalling_2016.jpg);">
I have also tried this also:
<div className="single_slide" style={{background-image: 'url(../images/WinterCalling_2016.jpg)'}}>
or
<div className="single_slide" style={{background-image: url(../images/WinterCalling_2016.jpg)}}>
Any help with this syntax would be greatly appreciated. Other people posted they change style to say styles but that did not seem to work either.
From DOC:
In React, inline styles are not specified as a string. Instead they
are specified with an object whose key is the camelCased version of
the style name, and whose value is the style's value, usually a
string.
So instead of background-image use backgroundImage.
For example:
padding-top ---> paddingTop
padding-left ---> paddingLeft
margin-right ---> marginRight
...
How to specify the inline style?
We need to pass a object to style attribute which will contains all the values in form of key-value pair.
Like this:
<div
style={{
backgroundImage: 'url(../images/WinterCalling_2016.jpg)',
marginTop: 20}}
>
Update:
We can use template literals to pass a variable inside url, like this:
<div style={{backgroundImage: `url(${image1})`}}>
React follow the camelcase convention so you have to change background-image to backgroundImage instead.
For more info, the documentation is here.
If you want to use the style property, please provide a JavaScript dictionary object. However, the style key for background-image is backgroundImage.
<div
className="single_slide"
style={{backgroundImage: 'url(../images/WinterCalling_2016.jpg)'}}
>
Did you try wrapping background-image in quotes?
i.e.
<div className="single_slide" style={{'background-image': 'url(../images/WinterCalling_2016.jpg)'}}></div>
This seems to work for me (at least, when testing with the background-color property; I don't have an image on hand to test with for background-image)
or you can use '!important' with this ....like "background-color:red!important"
Note: And call your js in footer .Because sometimes js reacts first when we call that in header.so call your 'js' in footer.
<div class="yourclass" style="background-color:red;" >your div</div>
style="background-color:red;"
Related
Could you tell me the way to do something like this in tailwindcss:
first[&>.a-child-class]:text-5xl
I'm trying to style the first element by the way passing classes when it's rendering,I want to change its child's style, but the code above did not work.
I tried to put that classes inside component by default, but I realized, the component need to reusable, so that it is not reasonable.
please help meeeee.
thank you so much, have nice day.
In tailwind 3.1, arbitrary variants can be stacked with built-in modifiers or with each other, just like the rest of the modifiers in Tailwind. You can see the document here. You are missing : after first.
Example:
<div className="first:[&>.a-child-class]:text-5xl">
<p className="a-child-class">first</p>
<p className="a-child-class">second</p>
<p className="a-child-class">third</p>
<p className="a-child-class">forth</p>
</div>
Tailwind Play demo
https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html
As per this documentation, we do not need to have a data- as a prefix for a custom HTML attribute in JSX to appear in the actual DOM element without warning.
But when I try and use<div size="hello">my div element</div> it appears as <div>my div element</div> in actual DOM.
When I try <div Size="hello">my div element</div> then it appears correctly but it gives a warning.
What is the right way of adding size as a custom property on the HTML attribute?
example codepen here
Since the "size" attribute is a valid attribute for other tags but does not exist on the <div> element React strips it. In the documentation you referenced, it does state that you can prefix attributes with data-. "Just like before, React lets you pass data- and aria- attributes freely".
For obvious reasons, this is not recommended and should probably only be done if non-react scripts utilize the attribute.
To answer the question, if you have to store data in attributes, the best option is to prefix it with data-.
i wanted to check if we can create css with dynamic values those are passed from classsName attribute .
I have a scenario where the left positions of a div will be dynamically changed based on data in react component.
Below is the scenario and wanted to check if anything like below is possible in material UI. Where the dynamic values can be passed to generate respective css.
data ={left:10, top:50 }
<div className={dyanamicClass(data.left,data.top)}
--
dynamicClass (left,top){
return
{
top:top+'%';
left:left+'%'
}
}
You can do the same behavior by using the "style" prop for the dynamic part and keep the class for the common CSS part.
<div className="youCommonCssClass" style={{ top: `${data.top}%`, left: `${data.left}%` }} />;
Having a dynamic class means that you need to define in your CSS all the possible variant of left/top possibilities.
exemple: .dynamiqueClassleft10-top10
Which doesn't really make sens since there are alot of different combinaisons.
You should just passed directly the left and top to the style props.
data ={left:10, top:50 }
<div style={data}}
I'm following the common pattern of breaking multi-attribute tags on to multiple lines, eg.
<div
className="foo"
style={{ fontWeight: "bold" }}
/>
I would like to add a comment inside that declaration, eg.
<div
className="foo"
{/* This is only temporary */}
style={{ fontWeight: "bold" }}
/>
However the above syntax doesn't work; I get:
SyntaxError: Unexpected token, expected ... (45:96)
(pointing to the closing } in temporary */}.)
Is it possible to add a comment inside a tag in JSX, and if so what syntax should I use?
You can comment inside JSX tags like so:
<div
className="foo"
/* This is only temporary */
style={{ fontWeight: "bold" }}
/>
Note: there are no "{" and "}"
a live example in JSFiddle
I remember read this in the official document few years ago, but after they rewrite the document, I can't find it anymore.
The short answer is "you can't", but there are various ways to fake it. The simplest, I think, is to piggy-back on another value:
<img
alt={"settings link"
/* This is just temporary */}
src="http://www.example.com/foo.jpg"
/>
It's a bit less than optimally clear, but all we've done is moved the brace up one line. That converts the "settings link" from a HTML-esque JSX value to a Javascript expression, which just happens to have a comment.
It does have the advantage that it ties the comment to the individual attribute, rather than the tag as a whole. I think that's clearer; if you really wanted to comment on the tag you'd do better to move it to the top.
If your goal was to comment out some attribute, yeah, that's a little obscure. But it should be clear enough to un-comment when you get around to it.
I think you're confusing props and children. When you do:
<div
className="foo"
{/* bar */}
>
You are attempting to use an inline JSX expression as if you were passing props inside the opening tag, this is NOT allowed. When you have an element, the opening tag can only contain deconstructed objects or prop=value values hence the reason it expects ... to deconstruct an object with props and values, for example:
const props = {
className: "foo"
}
<div {...props}>
You can't comment inside the tag because the tag doesn't allow for inline JSX expressions. JSX expressions are only allowed as children:
{/* bar */}
<div
className="foo"
>
In this example, the expression is not inside the opening tag of an element and allowed.
this is a very easy question, but I can not decide what is the cleanest nor actually to get it to work. I have this JSX-part in a reactJS class, and would like to set position dynamically through a prop-value. Which tag attribute should I add to the following code snippet? I have seen examples with style and tried setting left and right etc without any success.
Any help is appreciated.
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" width="200" height="200" />
JSX is a prepocessor syntax that will essentially create a bunch of React.createElement function calls with the right elements/components passed in to the different calls. So instead of doing React.createElement('div', props, children) for every container/component/piece of markup you want to create. The upside is that you can return component markup that's easy to read and understand but feels more familiar and easy to write than a ton of nested function calls.
There are a few key differences between regular HTML and JSX, though. Most of them stem from the clashes w/ JavaScript reserved words:
some attributes are camelCased and named slightly differently, like htmlFor (as opposed to for)
style gets passed in to the style property as an object via an outer JSX expression {{}}
most css names are different if they use a hyphen, but most just get camelCased. So: marginLeft, paddingRight, and so on
you can pass in style props just like you'd pass other props; they just go right into the style object you create for the component/element.
custom attributes (created with a hyphen) won't get rendered except for those that follow the aria spec (aria-, etc.)
So, taking that into consideration, your image component might look something like this:
<img onClick={this.handleKeyPress}
src="/image/1"
alt="HTML5"
style={{width: 200, height: 200, position: 'absolute', top: this.props.top, left: this.props.left}}/>
See also:
https://facebook.github.io/react/docs/dom-differences.html
https://facebook.github.io/react/docs/jsx-gotchas.html
Make sure you use the double curly braces on style or use a class:
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" style={{width:"200", height:"200"}} />
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" className="foo" />
In JSX ES6 an image needs to be imported before using it in component, or use src tag with require followed by image path within round braces all within curly braces.
you can set image property by using style tag followed by double curly braces. Don't need to give double or single inverted commas.
your image component might look something like this:
<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: 200, height: 200 }} />
You can also use props or state value to define image properties in between style tag. Don't forgot to set state value before using this. You can set state values directly through props or through function.
This looks something like this (using through state values):
<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: this.state.width, height: this.state.height }} />
OR
looks something like this (directly through props):
<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: this.props.width, height: this.props.height }} />