How to forward a ref from parent to child in reactjs

Question

I have the following scenario, what should I do so the attachment field existing in the child component can be accessible from the parent component

class ServiceDeskCustomerCreate extends Component {
  constructor(props, context) {
    super(props, context);
    this.AttachmentRef = React.createRef();
  }
  handleSubmit = async (event) => {
    var jsonresp = await IssueHelper.CreateCustomerRequest(
      userid,
      event,
      this.state.requestTypeFields,
      this.AttachmentRef.current, // here the `AttachmentRef` is always null
      this.MessageInfoRef.current,
      this.props.history,
      this.state.emailTokenData,
      lang
    );
  };
  render() {
    return (
      <>
        <CreateSystemFields
          FieldKey={key}
          elem={elem}
          bodyItemsStyle={bodyItemsStyle}
          labelAppearance={labelAppearance}
          emailSubject={this.state.emailSubject}
          editorValue={this.state.editorValue}
          onEditorSave={this.onEditorSave}
          EditorCoreRef={this.EditorCoreRef}
          onEditorSaveEnvironment={this.onEditorSaveEnvironment}
          files={this.state.files}
          saveCurrentFiles={this.saveCurrentFiles}
          AttachmentRef={this.AttachmentRef}
        />
        <Button
          appearance={this.state.buttonAppearene}
          style={{ display: "inline-block" }}
          type="submit"
          isDisabled={this.state.isSubmitButtonDisabled}
          isLoading={this.state.isSubmitButtonLoading}
          onClick={() => {
            this.handleSubmit();
          }}
        />
      </>
    );
  }
}

class CreateSystemFields extends Component {
  render() {
    <AttachmentField
      currentFiles={this.props.files}
      maxfileUploadSize={value.maxfileUploadSize}
      parentCallback={this.props.saveCurrentFiles}
      label={value.name}
      ref={this.props.AttachmentRef}
    />;
  }
}

Not sure you need a forward ref, I would say just passing an object as a prop to store the ref inside would be an easy option. — Keith, Oct 18 '22 at 10:05
Possible duplicate of https://stackoverflow.com/questions/51526461/how-to-use-react-forwardref-in-a-class-based-component — Berci, Oct 18 '22 at 10:06
@keith isn't that what i am doing or you have a different opinion? — Sora, Oct 18 '22 at 10:08
@Sora I though you meant using `React.forwardRef`, as in this case not sure you need it, as the ref is actually created in the child, I'll see if I can knock up a really simple example. — Keith, Oct 18 '22 at 10:18

score 1 · Accepted Answer · answered Oct 18 '22 at 10:20

Ok,

Here is a really simple example, it basically changes the child's innerText from the parent, but please note don't do something like this in a real React as that is something that doesn't require it, but it just makes the demo nice and simple.

Basically all you do is send an object to the child via props, the child can then update the object, and now the parent has access.

eg..

function Parent() {
  const store = {};
  return <div>
    <button
      onClick={() => {
        store.ref.current.innerText = 'Hello @ ' + new Date();
      }} 
    >
       Change Child Text using ref<br/>
       <b>ps. Don't do this in a real APP :}</b>
    </button>
    <Child store={store}/>
  </div>
}

function Child({store}) {
  const ref = React.createRef();
  store.ref = ref;
  return <div ref={ref}>Hello</div>
}


ReactDOM.render(<Parent/>, document.querySelector('#mount'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="mount"></div>

Thanks Keith, i will see how i can implement this in my code and make use of it — Sora, Oct 18 '22 at 10:22

How to forward a ref from parent to child in reactjs

1 Answers1