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
– Adam Jenkins, Commented Dec 21, 2021 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 — unizen
– unizen, Commented Dec 21, 2021 at 19:41

Zain Khan · Accepted Answer · 2021-12-21 19:28:42Z

2

you can do this like:

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

answered Dec 21, 2021 at 19:28

Zain Khan

1,8946 gold badges45 silver badges78 bronze badges

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

1 Comment

unizen Over a year ago

sorry, I meant when props.updateCards is empty, not true.

Adam Jenkins · Accepted Answer · 2021-12-21 21:50:32Z

0

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)} 
    />
)

answered Dec 21, 2021 at 21:50

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

Collectives™ on Stack Overflow

How to make input box readonly conditionally in React

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related