0

This is driving me nuts. I have a use case where I insert a node in one editor and it should insert the node in the subsequent editors. I am rendering the components only when they are clicked so if I go with the traditional way of referencing,

ref={editor => {
      this.editorRef = editor;
}}

the next editors reference in the parent components model will be null. By the way, parent component model has editorRef model as

 editorRef = {
    editor0: null,
    editor1: null
  };

Here is the code-sandbox

Previously, I updated them easily when they are rendering in one go but here they render as per the navigation button they click.

Will Jenkins
  • 9,507
  • 1
  • 27
  • 46
vam
  • 492
  • 7
  • 17
  • It's not clear what your expected vs actual behaviour is - what are you trying to achieve? – Will Jenkins Oct 21 '19 at 08:34
  • On the first load, although the second editor is not rendering, I would like to access its ref but it should show up only when `render content two` button is clicked – vam Oct 21 '19 at 08:57
  • I need that behavior because when first editor is shown up, and I click on `insert text` button, I would like to insert the text in second editor as well. – vam Oct 21 '19 at 09:00

1 Answers1

1

I've had a quick look and found your current solution to be overly complex - I think your approach needs a re-think.

You shouldn't need to be playing around with refs to do what you want to do, refs are only needed for a few use-cases, and this isn't one of them. Inserting text should just update your state in a common parent, and then this state should be used to render whatever you need in your two (or however many) editors.

Will Jenkins
  • 9,507
  • 1
  • 27
  • 46
  • Yeah, I thought there wouldn't be a way to achieve this directly through refs. But wanted to give it a try anyway. Thanks for clarifying it up Will Jenkins! – vam Oct 21 '19 at 10:15