How to make input box readonly conditionally in React

Question

How do I make an input box readonly conditionally? I have a state value I want to check and if it is empty, I want the input box prop of readonly to be added to the input box. This is my implementation of this so far:

<Input title={ 'Node Type'} name={ 'nodeType'} inputtype={ 'text'} placeholder={ 'Type node type name'} readonly={this.props.updateCards === {}} />

*edited question to say I want to check if it is empty rather than true based on comment reply

`this.props.updateCards` will never `=== {}`. Do you want to check if it's empty? Or if it's some other value? — Adam Jenkins, Dec 21 '21 at 19:27
Ah sorry, I meant if it is empty. I phrased my question wrong. It's default state is empty and that's the case when I want the readonly prop added to the input box — shonacoder, Dec 21 '21 at 19:41

score 2 · Answer 1 · answered Dec 21 '21 at 19:28

2

you can do this like:

<Input readonly={this.props.updateCards ? true : false} />

answered Dec 21 '21 at 19:28

Zain Khan

1,644
5
31
67

sorry, I meant when props.updateCards is empty, not true. – shonacoder Dec 21 '21 at 19:44

score 0 · Answer 2 · answered Dec 21 '21 at 21:50

If it's empty you can use this like below. For an implementation of what isEmpty would look like, see: this question

return (
    <Input
      title={ 'Node Type'} 
      name={ 'nodeType'} 
      inputtype={ 'text'}
      placeholder={ 'Type node type name'} 
      readonly={isEmpty(this.props.updateCards)} 
    />
)

How to make input box readonly conditionally in React

2 Answers2