Conditionally add/remove property from element with React

Question

I have this TextField element. I want to conditionally add either value={x} or defaultValue={x}

this will work (without any conditionals)

<TextField
    id="pickupName"
    className="order-form-input"
    onBlur={this.fieldChange('name')}
    ref="pickupName"
    defaultValue={(order.pickup || {}).name || ''}
    // hintText="Pickup Contact Name"
    floatingLabelFixed={true}
    floatingLabelText="Contact Name"
/>

however, if I try to add conditionals (of course it will fail):

<TextField
    id="pickupName"
    className="order-form-input"
    onBlur={this.fieldChange('name')}
    ref="pickupName"
      {true ? defaultValue={(order.pickup || {}).name || ''} :
                            value={(order.pickup || {}).name || ''}}
    // hintText="Pickup Contact Name"
    floatingLabelFixed={true}
    floatingLabelText="Contact Name"
/>

is there a way to have the defaultValue or value properties point to functions instead of static strings? Given my need, I have to conditionally use either value or defaultValue because they behave quite differently.

yes but if I use value, then I have to use onChange, which is overkill, updating for every keystroke.. — Alexander Mills
– Alexander Mills, Commented Dec 13, 2016 at 9:11

Yurii Kramarenko · Accepted Answer · 2016-12-13 09:03:02Z

1

If you are using es6 you parse all remaining arguments in the end of component declaration using {...args} operator.

Example:

<TextField
    id="pickupName"
    className="order-form-input"
    onBlur={this.fieldChange('name')}
    ref="pickupName"
    floatingLabelFixed={true}
    floatingLabelText="Contact Name",
    {...extra_args}
    />

I hope it will work.

answered Dec 13, 2016 at 9:03

Yurii Kramarenko

1,0746 silver badges17 bronze badges

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

1 Comment

Alexander Mills Over a year ago

thanks! can you show an example of what extra_args might look like? array or plain object?

Collectives™ on Stack Overflow

Conditionally add/remove property from element with React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related