Getting data attribute of html element in react.js context

Question

The CMS passes a variable as data-rest-url attribute to the React.js App:

<div id="reactjs-root" data-rest-url="http://my-ip-addess:8080/Rest-api-here">...</div>

If I add jQuery to my React.js App, then I can simply:

 componentWillMount() {
    const $reactRoot = $('#reactjs-root');
    const restUrl = $reactRoot.attr('data-rest-url');
 }

But adding jQuery just for this? How would you pass some variable from a CMS to your Single Page React App and read / parse / get it with react.js?

You don't need jQuery for that. Plain vanilla JavaScript works fine. document.getElementById('reactjs-root').dataset.restUrl. — Fred
– Fred, Commented Apr 12, 2018 at 8:21
@Fred Sure, but it's harder to read and more error-prone (browser quirks): In general, I prefer to use the facade jQuery which handles all edge cases. — nachtigall
– nachtigall, Commented Apr 12, 2018 at 12:33
With React you usually don't really have any need for jQuery so if all you want to do is get an attribute from an element then its much better to solve that using plain JavaScript. — Fred
– Fred, Commented Apr 12, 2018 at 13:09

MrCode · Accepted Answer · 2017-03-14 11:47:57Z

14

Consider passing your data attributes to your component as props instead of hard coding the root element ID within the component itself.

Rendering:

var rootElement = document.getElementById('reactjs-root');
ReactDOM.render(
  <YourComponent resturl={rootElement.getAttribute('data-rest-url')}></YourComponent>,
  rootElement
);

Within the component you can access the injected url:

componentWillMount() {
    console.log(this.props.resturl)
}

This makes for a more reusable component that is decoupled from a specific element ID.

answered Mar 14, 2017 at 11:47

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

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

1 Comment

nachtigall Over a year ago

Ah, that's a slightly better approach even. Good idea.

Community · Accepted Answer · 2020-08-13 16:03:13Z

5

const reactRoot = document.getElementById('reactjs-root');
const restUrl = reactRoot.getAttribute('data-rest-url');

Also, avoid using $ in your variable name. You're likely to run into a lot of libraries that conflict with the $ you have used as a variable.

edited Aug 13, 2020 at 16:03

CommunityBot

11 silver badge

answered Mar 14, 2017 at 10:49

mehulmpt

16.7k13 gold badges54 silver badges90 bronze badges

1 Comment

Fred Over a year ago

Instead of the getAttribute method, you can use the dataset property.

Collectives™ on Stack Overflow

Getting data attribute of html element in react.js context

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related