CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Sourabh Banka
Sourabh Banka

Reputation: 1117

Use ref of other component into current component in React

My first react class is:

import React from 'react';
class School extends React.Component {
  render() {
    return (
      <div className="navigator" ref={(input) => { this.schoolref = input; }}>
        <div className="pan ui-draggable" style={this.props.subNavDimension} />
      </div>
    );
  }
}
export default School;

My second React class is:

import React from 'react';
class College extends React.Component {
  showshool = () => {
    //Here I want to access the ref defined in School class.
  }
  render() {
    return (
      <div className="ui-college-hello">
        <section className="1" onClick={this.showschool}></section>
        <section className="2" onClick={this.showstudent}></section>
      </div>
    );
  }
}
export default College;

Parent class of above both class is:

import React from 'react';
import School from 'School';
import College from 'College';
class ParentClass extends React.Component {
  showshool = () => {
    //Here I want to access the ref defined in School class.
  }
  render() {
    return (
      <School />
      <College />
    );
  }
}
export default ParentClass;

I am basically trying to access the ref of div of another component. I can't use the redux store. Please help me out from this.

Upvotes: 2

Views: 3162

Answers (1)

Dan
Dan

Reputation: 8794

Parent:

import React from 'react';
import School from 'School';
import College from 'College';
class ParentClass extends React.Component {
  setRef = myComponent => this.myComponent = myComponent
  showshool = () => {
    // use this.myComponent
  }
  render() {
    return (
      <School setRef={this.setRef} />
      <College ref={this.myComponent }/>
    );
  }
}
export default ParentClass;

College

import React from 'react';
class College extends React.Component {
  showshool = () => {
    // this.props.ref
  }
  render() {
    return (
      <div className="ui-college-hello">
        <section className="1" onClick={this.showschool}></section>
        <section className="2" onClick={this.showstudent}></section>
      </div>
    );
  }
}
export default College;

School:

import React from 'react';
class School extends React.Component {
  componentDidMount() {
    this.props.setRef(this.schoolref);
  }
  render() {
    return (
      <div className="navigator" ref={(input) => { this.schoolref = input; }}>
        <div className="pan ui-draggable" style={this.props.subNavDimension} />
      </div>
    );
  }
}
export default School;

Upvotes: 1

Related Questions