Can an element access to other fields on the same VMContext?

[jersiovic]

This is a fragment of the render method of the component I use for my view:

render() {
        const { formMode, loading, currentId } = this.state;
        return ( 
            <VMContext vm="RateVM"
                ref={el => this.VMContext= el}
                onStateChange={state => { if (state) { this.setState({ loading: state.Loading, currentId: state.Id, formMode: state.FormMode }) } }} >
                {!loading &&
                    <Form>
                    <CRUDToolbar
                            IdToLoad={currentId}
                            formMode={formMode}
                            />

CRUDToolbar inherits by the moment from React.Component.

import React from 'react';
import PropTypes from 'prop-types';
import dotnetify from 'dotnetify';
import { Scope } from 'dotnetify';
import { withTheme, Modal, TextAreaField, VMContext, Form, Element,DataGrid, DropdownList, Alert, Panel, TextField, Button  } from 'dotnetify-elements';

export const FormModeEnum = { browse: 0, update: 1, new: 2 };
dotnetify.debug = true;

class CRUDToolbar extends React.Component {
    createButton = (cmdButtonProps) => {
        return <Button id={cmdButtonProps.id}
            key={cmdButtonProps.id}
            label={cmdButtonProps.label}
            onClick={cmdButtonProps.onClick}
            show={(this.props.formMode === FormModeEnum.browse)}
        />;
    }

    createButtons = (cmdButtons) => {
        if (cmdButtons)
        {
            return cmdButtons.map(this.createButton);
        }
    }
    
    render() {
        const { ...props } = this.attrs;
        const isBrowseable = () => this.props.formMode === FormModeEnum.browse;

        return (
            <Panel horizontal>
                <Button label="Edit" id="Edit" show={isBrowseable() && (this.props.IdToLoad > 0)}  />
                <Button label="Save" id="SubmitUpdate" submit show={this.props.formMode === FormModeEnum.update} />
                <Button label="Save" id="SubmitNew" submit show={this.props.formMode === FormModeEnum.new}  />
                <Button label="Cancel" id="Cancel" secondary show={this.props.formMode !== FormModeEnum.browse} />
                <Panel right>
                    {this.createButtons(this.props.extraButtons)}
                    <Button label="Add" id="Add" show={isBrowseable()} />
                </Panel>
            </Panel>
        )
    }
}
export default CRUDToolbar;

The question is: If CRUDToolbar inherits from React.Component could it access directly to other properties in the viewmodel to don't need to receive IdToLoad and FormMode as parameters?

[dsuryd]

It has to inherit from Element to get access to the VMContext state. See the Customization page in the website.

[jersiovic]

Thank you