Question

0

93

Views

Problem reading state from React child Components using child->parent callback register model

I'm maintaining a legacy Class based React project and introducing functional components in as I go. One of the workarounds to try to avoid a total rewrite is to allow child components to communicate with parents via a 'registration' model where the child registers itself with the parent and the parent calls child functions.

My problem is that the child state seems to become inaccessible to the parent ( Calling the 'getChildValue()' function always returns the initial child state.)

I guess in a class based world, I'd just bind(this) to the function and it would work.

Can anyone help:

A pen illustrating the problem is here:

https://codepen.io/seven360/pen/NWaEjmW

Clicking the 'Inc Value In Child' increments the state, but the 'Get Value From Child' always returns 1 (the initial state)

const ChildElement = (props) =>
{
  const [ value, setValue ] = useState ( 1 ) ;

  const getValue = () =>
  {
    console.log ( "getValue Called");
    return value ;
  }
  
  useEffect(() => {
      
      props.register ( {
        getValue: getValue
      }) ;
      
    }, [] ) ;
   
  const incChildValue = () =>
  {
    setValue ((value) => value + 1);  
  }
 
  return <div>
    <h1>Child Component Value Currently = {value}</h1>
    <button type='button' onClick={incChildValue} >Inc Value In Child</button>
    
  </div>
}

And this is the parent 'legacy' container:

class Container extends React.Component
{
  constructor ( props )
  {
    super(props) ; 
    
    this.register = this.register.bind(this) ;
    this.getChildValue = this.getChildValue.bind(this);
    
    this.childRef = React.createRef();  
  }
  
  register ( childFuncs )
  {
    console.log ( "Registered");
    console.log ( childFuncs );

    this.childRef.current = childFuncs ;
  }

  getChildValue ()
  {
    const childValue = this.childRef.current.getValue() ; 
    
    alert ( "This Should not be 1 - " + childValue );
  }
  
  render()
   {
    return (
      <div>
        <div>Container</div>
        <ChildElement register={this.register} />
        <button type='button' onClick={this.getChildValue} >Get Value From Child</button>
      </div>
    )
   }
}

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-05T09:01:15.280Z

The issue is, on your Child component, useEffect has no dependencies, so the register function will only run on mount. You need to run every time the value is changed. So add the value as a dependency.

useEffect(() => {
  props.register({
    getValue: () => {return value;}
  });
}, [value]);