I have attached an event listener to the parent element to listen for a non-synthetic-event and I wonder if there is a nice way to get reference to the ponent which triggers the event to use it's properties

I need to postpone the rendering of itemponent until the nonSyntheticEvent occurs

const items = [
  {
    name: "click me",
    ponent: function First() {
      return <strong>asd</strong>;
    }
  },
  {
    name: "click me 2",
    ponent: function Second() {
      return <b>oasd</b>;
    }
  }
];

class Component extends React.Component {
  ponentDidMount() {
    this.el.addEventListener("nonSyntheticEvent", event =>
      this.nonSyntheticEventHandler(event)
    );
  }

  nonSyntheticEventHandler(event) {

    // how to get reference to item
    // from event.target to render it's itemponent

    const el = React.createElement(itemponent);
    ReactDOM.render(el, event.target);
  }

  render() {
    return (
      <div ref={ref => { this.el = ref; }}>
        {this.props.items.map(item => <Child {...item} />)}
      </div>
    );
  }
}

<Component items={items} />

I have attached an event listener to the parent element to listen for a non-synthetic-event and I wonder if there is a nice way to get reference to the ponent which triggers the event to use it's properties

I need to postpone the rendering of item.ponent until the nonSyntheticEvent occurs

const items = [
  {
    name: "click me",
    ponent: function First() {
      return <strong>asd</strong>;
    }
  },
  {
    name: "click me 2",
    ponent: function Second() {
      return <b>oasd</b>;
    }
  }
];

class Component extends React.Component {
  ponentDidMount() {
    this.el.addEventListener("nonSyntheticEvent", event =>
      this.nonSyntheticEventHandler(event)
    );
  }

  nonSyntheticEventHandler(event) {

    // how to get reference to item
    // from event.target to render it's item.ponent

    const el = React.createElement(item.ponent);
    ReactDOM.render(el, event.target);
  }

  render() {
    return (
      <div ref={ref => { this.el = ref; }}>
        {this.props.items.map(item => <Child {...item} />)}
      </div>
    );
  }
}

<Component items={items} />

• javascript
• reactjs

• You could try attaching a reverse reference in the ref function, maybe? ref={ref => { this.el = ref; ref.reactComponent = this }}. Seems very hacky, though. – Håken Lid Commented Sep 2, 2018 at 7:15
• It should be handled with refs, not necessarily as suggested above but somehow. What's your case exactly? What is this event and why should div be replaced with its own child? There may be much less plicated ways to achieve a similar thing, depending on what should the result look like. – Estus Flask Commented Sep 2, 2018 at 20:05
• It's a select event, native for Apple TV TVML applications and the doc will not be replaced by it's child, I was trying to simplify the question – Teneff Commented Sep 3, 2018 at 10:13

1 Answer 1

With React 16.3 React.createRef() is introduced which can be used in Component to create reference before the Child ponent is rendered.

for example in Component.constructor a reference to each child can be created in the state

this.state = {
  items: items.map(item => ({
    ...item,
    reference: React.createRef()
  }))
};

and then in the Child ponent can be used from props:

function Child(props){
  return (
    <div ref={props.reference}>
      <span>{props.name}</span>
    </div>
  );
}

and then in the nonSyntheticEventHandler the item can be obtained like so:

const found = this.state.items.find(item => {
  return item.reference.current === event.target;
});

working example in Codesandbox.io