[React] react.js get props/parameter of the HTML (outside of the js)

 HTML

<script src="{{ asset('js/app.js') }}" defer></script>

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

<div id="example" token='{{ csrf_token() }}' ></div>

JS

import React from 'react';

import ReactDOM from 'react-dom';

function Example(props) {

return (

<div className="container">

<div className="row justify-content-center">

<div className="col-md-8">

<div className="card">

<div className="card-header">The token is { props.token }</div>

<div className="card-body">I'm an example component!</div>

</div>

</div>

</div>

</div>

);

}

export default Example;

if (document.getElementById('example')) {

var _token = document.getElementById('example').getAttribute('token');

ReactDOM.render(<Example token={ _token } />, document.getElementById('example'));

}