get data attribute from “root” DOM node in react js

Question

Let’s say there is a <div> somewhere in HTML file:

I want to pass an attribute data-person-name from that <div> having id root,to react element

<div id="root" data-person-name="John"></div>

const element = <h1>Hello,{data-person-name}</h1>;
ReactDOM.render(element, document.getElementById('root'));

Please suggest the right way to do that.

Note that personName is an invalid attribute for div elements. If you want to add non-DOM information to elements, use a data-* attribute (e.g., data-person-name). — T.J. Crowder
– T.J. Crowder, Commented May 13, 2020 at 11:42
I'm afraid it's not clear what you're asking. You can get the element via document.getElementById("root") and get its attribute value via getAttribute("attribute-name-goes-here"). But this feels like an X/Y problem. Why do you want to take an attribute value and use it in a React element? — T.J. Crowder
– T.J. Crowder, Commented May 13, 2020 at 11:44
@T.J.Crowder I am rendering an input component on that Div, I have to send placeholder on basis of some condition, in data-person-name.So for that purpose, I need to do that — abhishek gupta
– abhishek gupta, Commented May 13, 2020 at 12:05
Sorry, I still don't get it. Normally you wouldn't use attributes like that in React. You'd pass props through the hierarchy instead. — T.J. Crowder
– T.J. Crowder, Commented May 13, 2020 at 12:23

Armine Abramyan · Accepted Answer · 2020-05-13 11:58:05Z

4

A cleaner way would be to prefix all custom attributes with "data-". Because there is no known attribute "personName" for a div element and having that is against W3 rules. The code may look like this:

<div id="root" data-personName="John"></div>
const element = <h1>Hello,{document.getElementById('root').getAttribute('data-personName')}</h1>;

answered May 13, 2020 at 11:58

Armine Abramyan

1171 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

abhishek gupta Over a year ago

Thanks @arm, it worked for me, but is there any other way for doing this.

Armine Abramyan Over a year ago

if you want to pass personName by data attribute, I think there is no better way. But you can use localStorage instead: In App.js you can set personName: localStorage.setItem('personName', 'John'); and then use that value from anywhere: localStorage.getItem('personName');

abhishek gupta Over a year ago

Thanks @arm for the solution

Collectives™ on Stack Overflow

get data attribute from “root” DOM node in react js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related