This article will show you some methods to set data properties in React. In javascript, we can use not similar to check whether the value of two operands matches or not. If two operands have the same value, it returns false.
Attribute with Javascript
The browser’s HTML is “read” when it loads the page and is used to create DOM objects. Most standard HTML attributes transform into DOM object properties when applied to element nodes.
The DOM object, for instance, has body.id = "page" if it’s a <body id="page"> tag.
However, mapping between properties is not one-to-one. This section will focus on separating these two ideas, how to work with them, and their similarities and differences.
HTML Attributes Tags may have attributes in HTML. The browser recognizes the standard attributes and turns them into DOM properties when it parses the HTML to produce DOM objects for the tags.
As a result, the appropriate attribute will be created for each element with an id or another standard attribute. However, if the attribute is non-standard, that does not occur.
Code:
<!DOCTYPE html>
<html>
<head>
<title>LearnShareIT</title>
</head>
<body id="body" something="something">
<script>
console.log(document.body.id);
console.log(document.body.something);
</script>
</body>
</html>Output:
body
undefinedAs you can see, when we get the id attribute of the <body>, it can be obtained, but with the property we created ourselves, it cannot be obtained.
All properties are accessible using the following methods:
element.hasAttribute(name)– Check for existence.element.getAttribute(name)– Get the value.element.setAttribute(name, value)– Set the value.element.removeAttribute(name)– Remove the attribute.
Setting data attributes in React
Use element.setAttribute()
In JavaScript, setAttribute() is a method of the Element Object that changes an element’s specified attribute value, as was mentioned in the previous section. The program will change the attribute’s value if it already exists. If it does not already exist, the new attribute will have its value set to the element.
Syntax:
element.setAttribute(attributeName, value)Parameter:
- element: The element that needs to set the attribute.
- attributeName: The name of the attribute to be set from element.
- value: The value to be set for the attribute.
Code:
import React from "react";
export default function App() {
const handleClick = (e) => {
e.target.setAttribute("data", "button");
console.log(e.target);
};
return (
<div>
<button onClick={handleClick}>
Set Data
</button>
</div>
);
}Output:
<button data="button">Set Data</button>Pass value to ‘data‘ attribute
In this way, we will pass the value to the data property we need to set. Use the {} operator and pass in a variable containing the value we want to pass.
Code:
import React from "react";
export default function App() {
const webData="LearnShareIT";
return (
<div>
<button data={webData}>
Set Data
</button>
</div>
);
}When you open the website’s DOM, the data attribute is set to “LearnShareIT”, so we can solve the problem of the article. I hope these methods will be helpful to you.
Summary
To summarize, there are some methods for topic: How to set data attributes in React. This article introduced you two ways to solve this problem: The first method, using element.setAttribute() method or the second method, passing the value to the data attribute method. Let’s try them.
Maybe you are interested:
- How To Create a Back button with React Router
- Submit a form using the Enter key in React.js
- How To Set Optional Props With Default Values In React
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs