react - reference to component passed as a prompt

Question

I rendered EditModal component in my Test component. Iam referencing it by 'this.edit'. I passed UserForm component as prompt to EditModal. I also tried to reference it. But 'this.form' returns undefined.

Why? Is there any way to solve this?

class Test extends React.Component {

   test(){
     this.form.someMethod();
   }

    render() {   
      return (
        <div>            
          <EditModal form={<UserForm ref={(form) => { this.form = form; }} />} ref={(edit) => { this.edit = edit; }}/>                        
        </div>
      );
    }
  }
export default Test;

//EditModal.js

class EditModal extends React.Component {
    constructor() {
        super();
        this.handleShow = this.handleShow.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.state = { show: false};
    }

    handleClose() {
        this.setState({ show: false });
    }

    handleShow(id) {
        this.setState({ show: true, currentId: id});
    }

  render() {
    return (
        <Modal show={this.state.show} onHide={this.handleClose}>
            <Modal.Header closeButton={false}>
            <Modal.Title>Uprav zaznam</Modal.Title>
            </Modal.Header>
        <Modal.Body>
           {this.props.form}
        </Modal.Body>
            <Modal.Footer>
            <Button onClick={this.handleClose}>Zatvorit</Button>
            </Modal.Footer>
      </Modal>
    );
  }
}

export default EditModal;

Answer 1

this.form will be accessible once the UserForm component has been mounted (presumably inside the EditModal) and only if the EditModal does not clone the form prop and overrides the ref.

So if this.form is undefined, either it has not been mounted yet, or has been unmounted (by the time test method is invoked) or the ref has been overriden.

Without the code for EditModal it is not possible for anyone to determine which of the above is the case.