React use refs from parent to child

Question

I am using the jqwidget for grid in react.js. I have JqxListBox having a list of option in my parent component.

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <JqxListBox ref='myListBox' style={{ float: 'left' }} width={150} height={150} source={listBoxSource} checkboxes={true} />;
  }
}

When user select or unselect some option in jqxlistbox i want to open show and hide coloumn in the grid but the refs is not accessed in child component. How to access the jqxlistbox property in child component react. In child componentDidMount function i'm accessing the ref like.

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    // Cannot read property 'on' of undefined
    this.refs.myListBox.on('checkChange', (event) => {
      console.log("something");
    });
  }

  render() {
    return <div>Child component</div>;
  }
}

It give me the error : TypeError: Cannot read property 'on' of undefined

there are no relationship in between your parent and child component — klugjo, Apr 25 '18 at 06:27

klugjo · Answer 1 · 2018-04-25T06:26:28.460

-1

They way to access refs has changed in React 16.3.2:

This is the way you should set it up:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    // Declare and initialize the ref in the constructor
    this.myListBox= React.createRef();
  }

  componentDidMount() {
    // Access the ref
    this.myListBox.on('checkChange', (event) => {
      this.props.onEventFromParentComponent(event);
    });
  }

  render() {
    return <JqxListBox ref={this.myListBox} style={{ float: 'left' }} width={150} height={150} source={listBoxSource} checkboxes={true} />;
  }
}

edited Apr 25 '18 at 06:26

answered Apr 25 '18 at 06:02

klugjo

19,422
8
57
75

This example is for the same component but i want to access the this.myListBox.on in my child component. – truesource Apr 25 '18 at 06:19
Don't do that. Using ref is already a bad pattern and you would just make it worse. Bubble up the event -> I have updated the code to reflect that – klugjo Apr 25 '18 at 06:25
i have a form based on that i reload the grid in child component so in parent i have jqxlistbox where user select list of coloumn and based on that i need to reload the child component. please see https://ibb.co/fqwXeH. – truesource Apr 25 '18 at 06:37
They are not parent and child, just 2 different component. Basically the ref to your listbox needs to be in the same class, otherwise it doesnt work – klugjo Apr 25 '18 at 06:46
can i pass the refs in parent something like in child. – truesource Apr 25 '18 at 06:48
this is very bad practice, only pass callbacks or values in between components – klugjo Apr 25 '18 at 06:59
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/169728/discussion-between-truesource-and-klugjo). – truesource Apr 25 '18 at 07:01
Can't access the chat from my current machine, sorry – klugjo Apr 25 '18 at 07:02
thanks. so should i use only one component for this or pass the value as props from parent to child. – truesource Apr 25 '18 at 07:45

React use refs from parent to child

1 Answers1