How To
Summary
How to address HTML elements when trying to use ReactJS to render graphical replies in EBA/SCBA
Objective
You are trying to implement a graphical component in EBA.
You have the requirement to be able to address one of your generated HTML elements from within the React code after you have successfully rendered the React class.
One example could be the usage of the leaflet library that is filling the map content after the HTML elements are rendered into the React DOM.
It does that by being triggered in the componentDidMount() method in your React class.
Environment
You are working with and developing in the Lab of EBA.
Steps
To be able to address your already rendered elements from within the React code, you can use React references.
- In the constructor of the React Class you create a React reference and store it in a variable.
constructor (props) {
super(props);
this.mapReference=React.createRef();
} - In the render() method of the class you provide that reference to create the HTML element
<div ref={this.mapReference} style={{height : '270px'}} /> - In your code, for example in componentDidMount() you can use that reference to address the already rendered element
var map = L.map(this.mapReference.current, {.......});
Refer to the React and Leaflet documentation if you want to learn more.
Related Information
Document Location
Worldwide
[{"Business Unit":{"code":"BU059","label":"IBM Software w\/o TPS"},"Product":{"code":"SSJGEG","label":"IBM Watson Supply Chain Insights"},"Component":"EBA;SCBA","Platform":[{"code":"PF025","label":"Platform Independent"}],"Version":"All Versions","Edition":"","Line of Business":{"code":"LOB59","label":"Sustainability Software"}},{"Business Unit":{"code":"BU055","label":"Cognitive Applications"},"Product":{"code":"SUNSET","label":"PRODUCT REMOVED"},"Component":"","Platform":[{"code":"PF025","label":"Platform Independent"}],"Version":"All Versions","Edition":"","Line of Business":{"code":"","label":""}}]
Was this topic helpful?
Document Information
More support for:
IBM Watson Supply Chain Insights
Software version:
All Versions
Document number:
1127793
Modified date:
27 December 2019
UID
ibm11127793
Manage My Notification Subscriptions