React - Pass parameter to app with data on root element

Question

I have a bit of an odd use case for a react app, I'd like to provide a root URL to the app based on a parameter on the element we mount the react app on.

ReactDOM.render(<MyGoodApp />, document.getElementById('root'));

Where in the HTML DOM I have

<div id="root" data-param="https://website.biz/api/"></div>

I can't find anything particularly in the documentation that covers this case. I'm constrained in deploying this app due to business constraints so need to pass the value in this way or a similar way if possible. The value will be dynamic.

Kevin Qian · Accepted Answer · 2018-03-12 02:39:58Z

21

Just do what you would normally fetch an attribute from DOM, get its attribute and send it as a prop to the React component

class App extends React.Component {
  render() {
    return <div>{this.props.message}</div>
  }
}

const el = document.getElementById('root');

ReactDOM.render(<App message={el.getAttribute('data-param')} />, el)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" data-param="https://website.biz/api/"></div>

edited Mar 12, 2018 at 2:39

answered Mar 12, 2018 at 2:36

Kevin Qian

2,7201 gold badge18 silver badges30 bronze badges

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

3 Comments

Rob Over a year ago

And bippity-boppity-boo? What does that do? How does it answer the question? Don't just blurt out code. Explain yourself ! stackoverflow.com/help/how-to-answer

Kevin Qian Over a year ago

@Rob I usually post code and then add comments, sorry for the confusion...

Dom Over a year ago

This is the way to do it, just pass a prop like you would do with any other component. To get the value of the data attribute you could also use dataset instead of getAttribute: developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…

Collectives™ on Stack Overflow

React - Pass parameter to app with data on root element

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