How to use the matrix-react-sdk.getComponent function in matrix-react-sdk

if (matrixChat.state.view !== VIEWS.LOGGED_IN || !matrixChat.state.ready) {
        console.log(Date.now() + " Awaiting room view: not ready yet.");
        if (retryCount >= retryLimit) {
            throw new Error("MatrixChat still not ready after " +
                            retryCount + " tries");
        }
        return sleep(0).then(() => {
            return awaitRoomView(matrixChat, retryLimit, retryCount + 1);
        });
    }

    console.log(Date.now() + " Awaiting room view: now ready.");

    // state looks good, check the rendered output
    ReactTestUtils.findRenderedComponentWithType(
        matrixChat, sdk.getComponent('structures.RoomView'));
    return Promise.resolve();
}

}).then(() => {
                // once the sync completes, we should have a welcome page
                httpBackend.verifyNoOutstandingExpectation();
                ReactTestUtils.findRenderedComponentWithType(
                    matrixChat, sdk.getComponent('auth.Welcome'));
                expect(windowLocation.hash).toEqual("#/welcome");
            });
        });

render: function() {
        var RoomList = sdk.getComponent('rooms.RoomList');
        var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
        var SearchBox = sdk.getComponent('structures.SearchBox');

        var collapseButton;
        var classes = "mx_LeftPanel mx_fadable";
        if (this.props.collapsed) {
            classes += " collapsed";
        }
        else {
            // Hide the collapse button until we work out how to display it in the new skin
            // collapseButton = <img alt="<" height="20" width="12" src="img/hide.png">
        }

        var callPreview;
        if (this.state.showCallElement &amp;&amp; !this.props.collapsed) {
            var CallView = sdk.getComponent('voip.CallView');
            callPreview = (

render: function() {
        var RoomList = sdk.getComponent('rooms.RoomList');
        var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
        var SearchBox = sdk.getComponent('structures.SearchBox');

        var collapseButton;
        var classes = "mx_LeftPanel mx_fadable";
        if (this.props.collapsed) {
            classes += " collapsed";
        }
        else {
            // Hide the collapse button until we work out how to display it in the new skin
            // collapseButton = <img alt="<" height="20" width="12" src="img/hide.png">
        }

        var callPreview;
        if (this.state.showCallElement &amp;&amp; !this.props.collapsed) {
            var CallView = sdk.getComponent('voip.CallView');
            callPreview = (

}

        // When collapsed, allow a long hover on the header to show user
        // the full tag name and room count
        let title;
        const roomCount = this.props.roomCount;
        if (this.props.collapsed) {
            title = this.props.label;
            if (roomCount !== '') {
                title += " [" + roomCount + "]";
            }
        }

        let incomingCall;
        if (this.props.isIncomingCallRoom) {
            const IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
            incomingCall = ;
        }

        return (
            <div title="{">
                
                    { this.props.collapsed ? '' : this.props.label }
                    {this.props.headerItems}
                    <div>{ roomCount }</div>
                    <div></div>
                    { badge }
                
                { incomingCall }
            </div>
        );
    },

function awaitLoginComponent(matrixChat, attempts) {
    return MatrixReactTestUtils.waitForRenderedComponentWithType(
        matrixChat, sdk.getComponent('structures.auth.Login'), attempts,
    );
}

render: function() {
        var connectDropTarget = this.props.connectDropTarget;
        var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget');
        var TruncatedList = sdk.getComponent('elements.TruncatedList');

        var label = this.props.collapsed ? null : this.props.label;

        //console.log("render: " + JSON.stringify(this.state.sortedList));

        var target;
        if (this.state.sortedList.length == 0 && this.props.editable) {
            target = ;
        }

        if (this.state.sortedList.length > 0 || this.props.editable) {
            var subList;
            var classes = "mx_RoomSubList";

            if (!this.state.hidden) {
                subList =

render: function() {
        const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
        const Loader = sdk.getComponent("elements.Spinner");

        if (this.state.protocolsLoading) {
            return (
                <div>
                    
                    
                </div>
            );
        }

        let content;
        if (this.state.loading) {
            content = <div>
                
            </div>;

<div>
                        { Entries.map((Entry) =&gt; {
                            const label = Entry.getLabel();
                            const onClick = this._setMode(Entry);
                            return <button>{ label }</button>;
                        }) }
                    </div>
                
                <div>
                    <button>{ _t('Cancel') }</button>
                </div>
            ;
        }

        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
        return (
            
                { body }
            
        );
    }
}

);
        } else {
            var error_box = "";
            if (curr_phase == this.phases.ERROR) {
                error_box = (
                    <div>
                        An error occured: {this.state.error_string}
                    </div>
                );
            }

            var CreateRoomButton = sdk.getComponent("create_room.CreateRoomButton");
            var RoomAlias = sdk.getComponent("create_room.RoomAlias");
            var Presets = sdk.getComponent("create_room.Presets");
            var UserSelector = sdk.getComponent("molecules.UserSelector");
            var RoomHeader = sdk.getComponent("molecules.RoomHeader");

            return (
                <div>
                    
                    <div>
                        <input placeholder="Name" value="{this.state.room_name}" type="text"> <br>
                        <textarea placeholder="Topic" value="{this.state.topic}"> &lt;br /&gt;
                        &lt;RoomAlias ref="alias" alias={this.state.alias} onChange={this.onAliasChanged}/&gt; &lt;br /&gt;
                        &lt;UserSelector ref="user_selector" selected_users={this.state.invited_users} onChange={this.onInviteChanged}/&gt; &lt;br /&gt;
                        &lt;Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset}/&gt; &lt;br /&gt;
                        &lt;div&gt;
                            &lt;label&gt;&lt;input type="checkbox" ref="is_private" checked={this.state.is_private} onChange={this.onPrivateChanged}/&gt; Make this room private&lt;/label&gt;
                        &lt;/div&gt;
                        &lt;div&gt;
                            &lt;label&gt;&lt;input type="checkbox" ref="share_history" checked={this.state.share_history} onChange={this.onShareHistoryChanged}/&gt; Share message history with new users&lt;/label&gt;</textarea></div></div>