Whats the best way to conditionally add readOnly in React?

Question

In React given a prop that provides true/false how would one conditionally add readOnly to an input field in JSX?

So if I had this.props.boolean whats a terse option for adding readOnly when this.props.boolean == false readOnly isn't attached, when this.props.boolean == true readOnly is attached.

score 33 · Accepted Answer · answered Mar 19 '18 at 03:25

33

<input readOnly={this.props.boolean} />

answered Mar 19 '18 at 03:25

J Livengood

2,729
1
12
26

8

This won't work as the value for the readonly attribute has to be "readonly" and not true or false. [see this](https://stackoverflow.com/a/6172968/9269688) – Hershi May 08 '20 at 12:57
This is simple yet effective. No need to write complex if else conditions. – Debakant Mohanty Aug 31 '21 at 12:13
seems like the upper case `o` changes everything! – Alex028502 Apr 22 '22 at 20:07

Ross Attrill · Answer 2 · 2020-10-01T05:23:34.957

4

This is ugly but it works:

{props.readonly ?
    <input placeholder="Can't edit here" readOnly />
    :
    <input placeholder="edit here..."/>
}

Make the two controls custom to avoid duplicating as much as possible...

edited Oct 01 '20 at 05:23

answered Oct 01 '20 at 02:23

Ross Attrill

2,594
1
22
31

I find it interesting and a little annoying that people mark this down without comment when the accepted answer is incorrect. – Ross Attrill Aug 15 '22 at 03:07

Whats the best way to conditionally add readOnly in React?

2 Answers2