How to set conditional property on component in react

Question

I'm using react date selector plugin called react-flatpickr. When I want the flatpickr to be disabled, I need to set a prop called "disabled" on the Flatpickr component. disabled is not a boolean that can be set to true or false. disabled is a property without a value. Is there a way to initialize the Flatpickr component with the disabled prop only when readOnly is true, instead of this horribly duplicated code?

getFlatPickr(id, ref, defaultDate, minDate, readOnly){
    if (readOnly) {
        return (
            <Flatpickr
                id={id}
                name={id}
                disabled
                className={"form-control"}
                placeholder={"MM/DD/YYYY HH:MM AM/PM"}
                options={{
                    enableTime: true,
                    dateFormat: this.state.flatpickrDateFormat,
                }}
            />
        );
    } else {
        return (
            <Flatpickr
                id={id}
                name={id}
                className={"form-control"}
                placeholder={"MM/DD/YYYY HH:MM AM/PM"}
                options={{
                    enableTime: true,
                    dateFormat: this.state.flatpickrDateFormat
                }}
            />
        );
    }
}

I have. The property is a single word - "disabled." It has no value, not true or false, so setting it to the value of readOnly does not work. — L Becker
– L Becker, Commented Feb 12, 2019 at 16:04
In react attributes passed without a value are assumed to be booleans and are given a true value. — Gabriele Petrioli
– Gabriele Petrioli, Commented Feb 12, 2019 at 16:11
If however you want the receiving component to not even register the prop then use disabled={readonly || undefined} — Gabriele Petrioli
– Gabriele Petrioli, Commented Feb 12, 2019 at 16:13

Treycos · Accepted Answer · 2019-02-12 20:37:43Z

2

Sure, simply set the disabled prop directly to your readOnly variable :

getFlatPickr(id, ref, defaultDate, minDate, readOnly) {
        return (
            <Flatpickr
                id={id}
                name={id}
                disabled={readOnly}
                className={"form-control"}
                placeholder={"MM/DD/YYYY HH:MM AM/PM"}
                options={{
                    enableTime: true,
                    dateFormat: this.state.flatpickrDateFormat
                }}
            />
        );
    }
}

Even shorter syntax :

getFlatPickr = (id, ref, defaultDate, minDate, readOnly) => (
    <Flatpickr
        id={id}
        name={id}
        disabled={readOnly}
        className="form-control"
        placeholder="MM/DD/YYYY HH:MM AM/PM"
        options={{
            enableTime: true,
            dateFormat: this.state.flatpickrDateFormat
        }}
    />
)

edited Feb 12, 2019 at 20:37

answered Feb 12, 2019 at 16:04

Treycos

7,4913 gold badges29 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to set conditional property on component in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related