Run function in child component after action in parent component

Question

I'm using refs for calculating block height in child component, it works fine inside, so after each removeHandler() function "doCalculating" is called

But if I tried to call this into parent component, doCalculating() always return the initial value. Like just after componentDidMount() Seems like doCalculating() into parent component refers to this.refs.tagList.clientHeight just once and not recalc even after child component update

React version 14.7 is used here, so I cannot use hooks

class ChildComponent extends Component {
  componentDidMount() {
    this.doCalculating()
  }

  doCalculating = () => {
    const defaultHeight = 50
    const newHeight = this.refs.tagList.clientHeight

    if (newHeight > defaultHeight ) {
      // do logic
    }
  }

  render() {
    return (
      <ul
        ref={"tagList"}
      >
        {array.map((item, index) => (
            <li key={index}>
              <button>
                {item}
                <span onClick={
                  (e) => {
                       this.removeHandler()
                       this.doCalculating()
                    } 
                 } ></span>
              </button>
            </li>
          )
        )}
      </ul>
    )
  }
}


class ParentComponent extends Component {

  actionFunc = () => {
    // some logic

    // call recalculate function, that always return initial value
    this.responsesTags.doCalculating()
  }

  render() {
    return (
      <div>
        <ChildComponent
          ref={instance => { this.responsesTags = instance }}
        />
        <button onClick={() => this.actionFunc()} />
      </div>
    )
  }
}

What is missing to recalculate a function when called in the parent component?

Your code seems to be ok. Can you create a codepen for your issue? — ravibagul91

Mat.Now Mat.Now · Accepted Answer · 2019-10-01T19:21:46

In my opinion your code works correctly, I've fiddle with your example (a little different), maybe it will be useful to you: https://jsfiddle.net/tu7vxfym/ . If I calculate height of the ul from child and parent component it will calculate correctly.

class ChildComponent extends React.Component {
  constructor(){
    super();
    this.doCalculating = this.doCalculating.bind(this);
    this.addDiv = this.addDiv.bind(this);
    this.state = {
      list: [],
      height:undefined
   }
 }
componentDidMount() {
  this.doCalculating()
}
doCalculating (){
  const defaultHeight = 50
  const newHeight = this.refs.tagList.clientHeight;
  this.setState(state=>{
    return state.height = this.refs.tagList.clientHeight
  })
  console.log(newHeight)
}
addDiv(){
  this.setState(function(state){
    return state.list.push(this.refs.tagList.clientHeight)
  })
}
render() {
  return (
    <div>
      <ul ref={"tagList"}>
       {this.state.list.map((e,i)=>{
         return (<li key={i}>{e}</li>)
       })}
      </ul>
      <h1>Calculated height: {this.state.height}</h1>
      <button onClick={this.addDiv}>Add list</button>
      <button onClick={this.doCalculating}>Child button</button>      
    </div>
   )
  }
}

class ParentComponent extends React.Component {
  constructor(){
   super();
   this.actionFunc = this.actionFunc.bind(this)
  }

  actionFunc(){
   this.responsesTags.doCalculating()
  }

  render() {
    return (
     <div>
      <ChildComponent ref={instance => { this.responsesTags = instance }}/>
      <button onClick={this.actionFunc}>Parent button</button>
     </div>
   )
 }
}

Run function in child component after action in parent component

1 Answers