Set styles dynamically after render - react - reactjs

Question

I currently supported my use case via componentDidMount. It worked for one time render. But soon I had to re-render the component i.e. build rows and cols again and hence to re-apply the marginLeft styles (in componentDidMount). I am not sure how to do that ?
Below is the code for the component in concern. Child graph component is a pure presentational component(read stateless).
var React = require('react');
var ReactDOM = require('react-dom');
var Graph = require('./graph');
var noOfLines, difference;
var _ = require('lodash');
module.exports = React.createClass({
displayName: 'Rules graph container',
propTypes: {
data: React.PropTypes.arrayOf(React.PropTypes.object),
lineAttributes: React.PropTypes.object,
handleNext: React.PropTypes.func,
handlePrevious: React.PropTypes.func,
pagination: React.PropTypes.object
},
getRows(n, d, lineHeight){
var rows = [], columns = [];
for (var i = n; i > 0; i--){
var isLast = (i === 1);
rows.unshift(
<div key={i} className='y-line' style={{height: lineHeight, marginTop: isLast ? (lineHeight / 2) : 0}}>
<div className='amt'>{ d + d * (n - i) }</div>
</div>
);
}
return rows;
},
buildCols(leftMargins){
const {data, lineAttributes} = this.props;
var cols = [];
for ( var i = 0; i < data.length; i++){
var height, isFirst;
if (data[i].val === lineAttributes.maxValue){
height = 100;
} else {
height = (data[i].val / lineAttributes.maxValue) * 100;
}
if (i === 0){
isFirst = true;
}
const button = `column_button_${i}`, name = _.startCase(data[i].name);
cols.push(
<div key={i} className={ isFirst ? 'first active column' : 'column'} style={{ height: `${height}%`, top: `${100 - height}%`, marginRight: '100px' }}>
<div className='count'>{data[i].val}</div>
<div className='column_button' style={{marginLeft: leftMargins && -leftMargins[i]}} ref={node => this[button] = node}><span className='event_label'>{name}</span></div>
</div>
);
}
return cols;
},
render(){
const {noOfLines: n, difference: d, lineHeight} = this.props.lineAttributes;
const rows = this.getRows(n, d, lineHeight), cols = this.buildCols();
return (
<div>
{n ? (
<Graph rows={rows} graphHeightPad={lineHeight / 2} cols={cols} pagination={this.props.pagination} />
) : null}
</div>
);
},
componentDidMount(){
const leftMargins = [];
for (var i = 0; i < this.props.data.length; i++){
var button = `column_button_${i}`;
var width = this[button].offsetWidth;
leftMargins.push(width / 4);
}
const cols = this.buildCols(leftMargins);
this.setState({cols}); // Intentional re-render
}
});

Answer 1

i understand that you want call the same function when re-render
what about componentDidUpdate()
do(){
const leftMargins = [];
for (var i = 0; i < this.props.data.length; i++){
var button = `column_button_${i}`;
var width = this[button].offsetWidth;
leftMargins.push(width / 4);
}
const cols = this.buildCols(leftMargins);
this.setState({cols}); // Intentional re-render
}
componentDidMount(){ this.do(); }
componentDidUpdate(){ this.do(); }