Vfrdtyky

I have 3 components, App, Parent and Child. The App uses a method provided by Parent and registers the children into Parent. This is for the Parent to collect the Refs (create a dependency map) of the Children it encompasses.

Child has a method named Animate which will be invoked by Parent via refs created.

When I try to print the dependencyMap I can see an array is being generated, the way I expect.

But when I try to access the child components from Parent using the dependencyMap, it always invokes the last on on the list of children.

That is to say, when I try to animate < CustomComponent > using animateDependentChildren within Parent.js, the CustomComponent2 only gets animated, even if I pass the correctId for CustomComponent1.

App.js

export default class App extends React.Component {

  render(){

    return(

      <Parent>

        {

          (props)=>{

            return(

              <View>

                <CustomComponent1 ref={props.register('s1')} key={1}>Text</CustomComponent1>

                <CustomComponent2 ref={props.register('s2')} key={2}>Text2</CustomComponent2>

                <ListComponent id={'s1'} key={3}/>

                <ListComponent id={'s2'} key={3}/>

              </View>

            )

          }

        }

      </Parent>

    );

  }

}





Parent.js

class Parent extends React.Component{

  constructor(props) {

    super(props);

    this.dependencyMap = {}

  }



  render() {

    return (

      <View>

        {this.props.children({

         register: this.register.bind(this)

        })}

      </View>

    );

  }



  register(dependentOn){

    let dependentRef = React.createRef();



    if(!this.dependencyMap[dependentOn]){

      this.dependencyMap[dependentOn] = ;

    }

    this.dependencyMap[dependentOn].push(dependentRef);



    return dependentRef;

  }



  animateDependentChildren(listId){

    let subscribers = this.dependencyMap[listId];



    subscribers.forEach(subscriber => {

        console.log('subscriber', subscriber);

        console.log('subscriber dom', subscriber.current);

        this.refs[subscriber].animate(scrollObj); // <-This function always animates the last of the list of children (ie CustomComponent2)

    });

  }

}

Any idea what Im doing wrong here? Cant React.createRef be used to create multiple references and then invoke them later individually?

As subscriber is the component ref, try changing this line:

this.refs[subscriber].animate(scrollObj);

...to:

subscriber.animate(scrollObj);

I hope this helps.