keep dynamically assigned tags on component

by Alexander Zonov

HTML

<div id="container" data-tealium-rel="link"></div>

JavaScript

class Hello extends React.Component {
	constructor(props) {
  	super(props);
    this.state = {tealiumid: undefined};
  }
	componentDidMount() {
  	this.state.tealiumid || this.checkTealiumTag();
  }
	componentWillUpdate() {
  	this.state.tealiumid || this.checkTealiumTag();
  }
  checkTealiumTag() {
  	let tId = this.div.attributes['data-tealium-rel'] && this.div.attributes['data-tealium-rel'].value;
    
    if (!this.state.tealiumid && tId) {
    	this.setState({
        tealiumid: tId
      });
    }
  	
  }
  render() {
    return <div className="element" data-telium-rel={this.state.tealiumid} ref={(d) => {this.div = d;}}>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);