fix: use the correct attribute name

e0ipso · e0ipso · commit e4849754307f · 2020-10-09T02:08:06.000+02:00
diff --git a/README.md b/README.md
@@ -64,7 +64,7 @@ document.loadWidget({
 Within the `<body>` tag add the instanceId div wherever you want this widget to render.
 
 ```html
-<div id="example-widget-1" data-attr="foobar"></div>
+<div id="example-widget-1" data-button-text="foobar"></div>
 ```
 
 - [See an example](https://github.com/js-widgets/example-widget/blob/master/src/public/index.html#L79) of the widget placement implementation.
@@ -85,8 +85,8 @@ document.loadWidgets({
 ```
 
 ```html
-<div id="example-widget-1" data-attr="foo"></div>
-<div id="example-widget-2" data-attr="bar"></div>
+<div id="example-widget-1" data-button-text="foo"></div>
+<div id="example-widget-2" data-button-text="bar"></div>
 ```
 
 #### Parameters
@@ -109,7 +109,7 @@ import React, { Component } from 'react';
 class Widget extends Component {
   render() {
     return (
-      <div className="App">{this.props.obj.getAttribute('data-attr')}</div>
+      <div className="App">{this.props.obj.getAttribute('data-button-text')}</div>
     );
   }
 }
@@ -122,15 +122,15 @@ export default Widget;
 #### DIV attributes
 
 ```html
-<div id="example-widget-1" data-attr="Hello world!"></div>
+<div id="example-widget-1" data-button-text="Hello world!"></div>
 ```
 
 - [See an example](https://github.com/js-widgets/example-widget/blob/master/src/public/index.html#L79) of the widget attribute implementation.
 
 #### Query string values
 
 ```
-http://localhost:3000/?data-attr=Hello%20world!
+http://localhost:3000/?data-button-text=Hello%20world!
 ```
 
 Note: DIV attributes are the preferred method and will always take precedence over the use of query
diff --git a/public/index.html b/public/index.html
@@ -47,7 +47,7 @@ <h1 class="title">Widget Example</h1>
           </div>
           <div class="message-body">
             <!-- START: WIDGET -->
-            <div id="example-widget" data-attr="Click here">
+            <div id="example-widget" data-button-text="Click here">
               <progress class="progress is-small is-primary" max="100">0%</progress>
             </div>
             <!-- END: WIDGET -->
diff --git a/src/components/Widget.jsx b/src/components/Widget.jsx
@@ -23,7 +23,7 @@ function Widget({ element }) {
       </p>
       <p className="is-size-6 pb-4">
         <button className="button is-primary">
-          {element.getAttribute('data-attr')}
+          {element.getAttribute('data-button-text')}
         </button>
       </p>
       <p>
