Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding an attribute in a <div> if the attribute has value [duplicate]

I am new to web development, so this is probably pretty fundamental. I want to add a data attribute to the div tag if the datainfo prop variable is not empty

<div style={{height: props.height - handleHeight()}} data={datainfo ? datainfo : ""}>

But right now the data attribute is added with an empty value if the datavalue is empty. Instead I want it to not appear in the div tag at all.

Can I add the whole thing in the JSX clause or how to do it?

like image 708
Kasper Hansen Avatar asked Mar 28 '19 12:03

Kasper Hansen


People also ask

How to add attribute to an HTML element with its relevant attribute?

The short answer is: use the jQuery attr () method. You can use this method to add attributes to the HTML element with its relevant attribute value. If you want to learn more about the jQuery attr method, you have to visit jQuery attr () method page to learn the syntax and more details. How jQuery Add Attribute to an HTML element

What is the difference between attribute name and attribute value?

The attribute name says what type of information you’re providing about the element, and the attribute value is the actual information. For example, an anchor ( <a>) element in an HTML document creates links to other pages, or other parts of the page.

Is there a way to have two values for a attribute?

In the DOM, attributes appear as properties of the element node as well as in the attributes object, so there would be no natural way to store two values. Show activity on this post. It's not technically valid, but every browser will ignore duplicate attributes in HTML documents and use the first value ( data-foo="bar" in your case).

Why do some HTML attributes not have values?

Some HTML attributes don’t need a value because they only have one option. These are called Boolean attributes. The presence of the attribute in a tag will apply it to that HTML element. However, it’s okay to write out the attribute name and set it equal to the one option of the value.


1 Answers

According to this other answer, you should put false instead of "".

<div style={{height: props.height - handleHeight()}} data={datainfo ? datainfo : false}>
like image 110
thibpat Avatar answered Oct 20 '22 08:10

thibpat