Semantic UI React: how to conditionally set a Form.Input to readOnly

Question

I want to conditionally set a Form.Input depending on selectedProfile if it is not null, it will set the Input as readOnly but if not then it won't. this is my code and of course it didn't work. It would be easier if it's like readOnly = true but it's not

  render() {
  let readOnly = _.isNil(selectedProfile) ? "" : 'readOnly';

  return (
   <Form>
          <Form.Input
                fluid
                required
                label="First name"
                placeholder="Jose"
                name="firstName"
                value={ _.isNil(selectedProfile) ? this.state.firstName : selectedProfile.first_name }
                onChange={this.handleChange}
                {readOnly}
              />
   </Form>

for more info on readOnly, here's semantic ui react's docs about it.

Tobias Golbs · Accepted Answer · 2019-03-13 08:21:48Z

4

You have to really provide a prop with true or false.

render() {
  return (
      <Form>
          <Form.Input
                fluid
                required
                label="First name"
                placeholder="Jose"
                name="firstName"
                value={ _.isNil(selectedProfile) ? this.state.firstName : selectedProfile.first_name }
                onChange={this.handleChange}
                // with this you are really passing true or false
                readOnly={!_.isNil(selectedProfile)}
              />
      </Form>
  }

answered Mar 13, 2019 at 8:21

Tobias Golbs

4,6164 gold badges31 silver badges50 bronze badges

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

2 Comments

eibersji Over a year ago

ohhhh so even if I can use readOnly alone without true or false by default, readOnly={!_.isNil(selectedProfile)} does work when I need to do it conditionally. I have learned something valuable today. thanks

Titenis Over a year ago

you should assign _.isNil(selectedProfile) to a var and reuse it

Arnaud Christ · Accepted Answer · 2019-03-13 08:20:19Z

1

You have to write it like this if readOnly value comes from a variable:

render() {
  let readOnly = !_.isNil(selectedProfile);

  return (
   <Form>
          <Form.Input
                fluid
                required
                label="First name"
                placeholder="Jose"
                name="firstName"
                value={ _.isNil(selectedProfile) ? this.state.firstName : selectedProfile.first_name }
                onChange={this.handleChange}
                readOnly={readOnly}
              />
   </Form>

answered Mar 13, 2019 at 8:20

Arnaud Christ

3,5713 gold badges27 silver badges34 bronze badges

Comments

soywod · Accepted Answer · 2019-03-13 08:21:51Z

1

Your code is not valid. A component expects property=value. In your case, you just put property. Also, readOnly expects a boolean, not a string. Change your code as following:

render() {
  return (
   <Form>
     <Form.Input
       fluid
       required
       label="First name"
       placeholder="Jose"
       name="firstName"
       value={ _.isNil(selectedProfile) ? this.state.firstName : selectedProfile.first_name }
       onChange={this.handleChange}
       readOnly={!_.isNil(selectedProfile)}
     />
   </Form>
}

answered Mar 13, 2019 at 8:21

soywod

4,5784 gold badges29 silver badges50 bronze badges

Collectives™ on Stack Overflow

Semantic UI React: how to conditionally set a Form.Input to readOnly

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related