Reactjs, sending and reading variables

Question

so basically I'm using ref to get component dimensions in componentDidMount() and I can read and console.log that and it gives me the width I want(look into code), but when I want to read and console.log that in the render() method and to use that informations, it gives me undefined . And I don't know what is wrong

 var Tooltip = React.createClass({ componentDidMount() { this.tooltipSize = this.refs.tooltip.getBoundingClientRect(); this.tooltipWidth = this.tooltipSize.width; // console.log(this.tooltipWidth); here it gives me the width }, render(){ var tooltipSize, tooltipWidth, tooltipStyle = { top: 0, left: 0, }; // console.log(tooltipWidth); here it gives me undefined return( <div ref="tooltip" className="tooltip" style={tooltipStyle}>{this.props.tooltip}</div> ); } }); var Button = React.createClass({ getInitialState() { return { iconStyle: this.props.iconStyle, style: this.props.style, cursorPos: {}, }; }, componentDidMount() { this.size = this.refs.button.getBoundingClientRect(); this.width = this.size.width; this.height = this.size.height; this.top = this.size.top; this.left = this.size.left; }, ... render() { var _props = this.props, top, left, width, height, size, //other variables ... return( <Style> {` .IconButton{ position: relative; } .IconButton:disabled{ color: ${_props.disabledColor}; } .btnhref{ text-decoration: none; background-color: blue; } `} <a {...opts} className="btnhref" id="tak"> <button ref="button" className={"IconButton" + _props.className} disabled={disabled} style={buttonStyle} onMouseEnter={this.showTooltip} onMouseLeave={this.removeTooltip} > <Ink background={true} style={rippleStyle} opacity={rippleOpacity} /> <FontIcon className={_props.iconClassName}/> </button> </a> </Style> ); } }); class IconButton extends React.Component { render(){ return( <div> <Tooltip tooltip={this.props.tooltip} /> <Button href={this.props.href} className={this.props.className} iconStyle={this.props.iconStyle} style={this.props.style} iconClassName={this.props.iconClassName} disabled={this.props.disabled} disableTouchRipple={this.props.disableTouchRipple} /> </div> ); } } 

And one thing else. How can I send variables with informations about dimensions of another component(Button component) to the Tooltip component? Because I need to use them inside of this component to place it. Thanks

Updated code:

 var Tooltip = React.createClass({ getInitialState() { return { tooltipWidth: null, tooltipHeight: null }; }, componentDidMount() { this.tooltipSize = this.refs.tooltip.getBoundingClientRect(); this.setState({ tooltipWidth: this.tooltipSize.width, tooltipHeight: this.tooltipSize.height }); }, ... render(){ var _props = this.props, fontSize, fontStyle, tooltipSize, tooltipWidth = this.state.tooltipWidth, tooltipHeight = this.state.tooltipHeight, w = this.props.buttonWidth, h = this.props.buttonHeight, y = this.props.buttonTop, x = this.props.buttonLeft, tooltipStyle = { top: y - tooltipHeight - 20 + "px", left: x - tooltipWidth/2 + w/2 + "px", };; ... return( <div ref="tooltip" className="tooltip" style={fontStyle}>{this.props.tooltip}</div> ); } }); var Button = React.createClass({ getInitialState() { return { iconStyle: this.props.iconStyle, style: this.props.style, cursorPos: {}, width: null, height: null, top: null, left: null, }; }, componentDidMount() { this.size = this.refs.button.getBoundingClientRect(); this.width = this.size.width; this.height = this.size.height; this.top = this.size.top; this.left = this.size.left; }, transferring1(){ var width = this.width; return width; }, transferring2(){ var height = this.height; return height; }, transferring3(){ var top = this.top; return top; }, transferring4(){ var left = this.left; return left; }, ... render() { var _props = this.props, opts, top, left, width, height, size; ... return( <Style> {` .IconButton{ position: relative; } .IconButton:disabled{ color: ${_props.disabledColor}; } .btnhref{ text-decoration: none; background-color: blue; } `} <a {...opts} className="btnhref" id="tak"> <button ref="button" className={"IconButton" + _props.className} disabled={disabled} style={buttonStyle} onMouseEnter={this.showTooltip} onMouseLeave={this.removeTooltip} > <Ink background={true} style={rippleStyle} opacity={rippleOpacity} /> <FontIcon className={_props.iconClassName}/> </button> </a> </Style> ); } }); class IconButton extends React.Component { constructor(props) { super(props); this.state = { buttonWidth: null, buttonHeight: null, buttonTop: null, buttonLeft: null, }; } componentDidMount() { this.setState({ buttonWidth: this.refs.btn.transferring1(), buttonHeight: this.refs.btn.transferring2(), buttonTop: this.refs.btn.transferring3(), buttonLeft: this.refs.btn.transferring4(), }); } render(){ return( <div> <Tooltip tooltipPosition={this.props.tooltipPosition} tooltip={this.props.tooltip} touch={this.props.touch} buttonWidth={this.state.buttonWidth} buttonHeight={this.state.buttonHeight} buttonTop={this.state.buttonTop} buttonLeft={this.state.buttonLeft}/> <Button ref="btn" href={this.props.href} className={this.props.className} iconStyle={this.props.iconStyle} style={this.props.style} iconClassName={this.props.iconClassName} disabled={this.props.disabled} disableTouchRipple={this.props.disableTouchRipple} /> </div> ); } } ReactDOM.render( <IconButton href="" className="" iconStyle="" style="" iconClassName="face" disabled="" disableTouchRipple="" tooltip="! ! ! Guzik ! to ! kozak ! ! !" tooltipPosition="" touch="true" />, document.getElementById('app') ); 

Answer 1

I think you should use state for setting variables in react

example

var Tooltip = React.createClass({
  constructor(){
    super();
    this.state = {tooltipWidth: 0}
  }

  componentDidMount() {
    this.tooltipSize = this.refs.tooltip.getBoundingClientRect();
    this.setState({tooltipWidth: this.tooltipSize.width}); //Update the state of this component
  },

  render(){
    console.log(this.state.tooltipWidth) //your tooltip width
    return(
      <div ref="tooltip" className="tooltip" style={tooltipStyle}>{this.props.tooltip}</div>
    );
  }
});

and for passing another's component dimension, you should calculate the size of Button component on the parent component (IconButton).

Then pass it to Tooltip like this (just example)

<Tooltip buttonHeight={this.state.buttonHeight} tooltip={this.props.tooltip} />