Home > Net >  How to make input box readonly conditionally in React
How to make input box readonly conditionally in React

Time:12-22

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

CodePudding user response:

you can do this like:

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

CodePudding user response:

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