CODEWITHSUNDEEP
reactjsdisplayhidden-fieldmobiscrollreadonly-attribute
Alistair
Alistair

Reputation: 1

How to hide Popup fields or display them as read only in MobiScroll using React

I trying to find out how we can conditionally hide fields, or set them to be read-only, in Mobiscoll using React. If anyone could share an example of how to do this I would be most grateful.

In the following code that is returned in an index.tsx page, how can I make the Select with label="Category" be set to read-only and set the field with label="Work Category" to be hidden or not displayed?

        <div className="mbsc-form-group">
            <Textarea
                label="Description"
                value={popupEventDescription}
                onChange={({ target }) => onChange(target.value, 'description')}
            />

            <Textarea label="IsWorkUnit" value={popupEventIsWorkUnit} />

            <Select
                label="Category"
                data={popupEventCategories}
                value={popupEventCategory}
                onChange={({ value }) => onChange(value, 'category')}
            />
            <Select
                label="Work Category"
                data={popupEventWorkCategories}
                value={popupEventWorkCategory}
                onChange={({ value }) => onChange(value, 'workCategory')}
            />
            <Select
                selectMultiple={!isEdit}
                label="Engineer"
                data={resources}
                value={popupEventEngineers}
                onChange={({ value }) => onChange(value, 'engineer')}
            />
        </div>

Upvotes: 0

Views: 112

Answers (1)

Alistair
Alistair

Reputation: 1

Found the solution to my problem.

I am now simply wrapping the mobiscroll controls with a react if condition.

{isWorkUnit ? (
    <Select
        label="Work Category"
        data={popupEventWorkCategories}
        value={popupEventWorkCategory}`enter code here`
        onChange={({ value }) => onChange(value, 'workCategory')}
    />
    ) : (
    <Select
        label="Category"
        data={popupEventCategories}
        value={popupEventCategory}
        onChange={({ value }) => onChange(value, 'category')}
    />
)}

Upvotes: 0

Related Questions