[Solved]-How to get refs from another component in React JS-Reactjs

ref is property of each this.props.children hence you can access ref of child component in parent via ref property on this.props.children

make sure you access ref after componentdidmount

edit :

try below set of code if this works :

var mychild= react.children.only(this.props.children);
var clone = react.cloneelement(mychild, { ref: "myref" });

the react's main idea is passing props downward from parent to children (even to deeper levels of children - grandchildren i mean)

therefore, when we want the parent to do something which is triggered from (or belongs to) the children, we can create a callback function in the parent, then pass it down to children as props

for your preference, this is a demonstration on how to pass callback functions downward through many levels of children and how to trigger them:

force react container to refresh data

re-initializing class on redirect

in your case, you can access refs from children components as follows: (using string for ref - as you stated)

parent component:

import react, { component } from 'react';
// import child component here

export default class parent extends component {
  constructor(props){
    super(props);
    // ...
    this.getrefsfromchild = this.getrefsfromchild.bind(this);
  }    

  getrefsfromchild(childrefs) {
    // you can get your requested value here, you can either use state/props/ or whatever you like based on your need case by case
    this.setstate({
      myrequestedrefs: childrefs
    });
    console.log(this.state.myrequestedrefs); // this should have *info*, *contact* as keys
  }    

  render() {
    return (
      <child passrefupward={this.getrefsfromchild} />
    )
  }  
}

child component:

import react, { component } from 'react';

export default class child extends component {
  constructor(props){
    super(props);
    // ...
  }    

  componentdidmount() {
    // pass the requested ref here
    this.props.passrefupward(this.refs);

  }    

  render() {
    return (
      <div classname="homemain">
        <section ref="info"> <info/> </section>

        <section ref="contact"> <contact /> </section>
      </div>          
    )
  }  
}