Conditional react attributes

Question

I've had a look at some other posts but nothing seems to address only including an attribute if a condition is met rather than give another value if the condition is false.

I'm trying to only add an attribute if a condition is met. Take this for example:

<input {{true && id='test'}} type='text'/>

I've just put true instead of the real condition for ease, so this input should have an id of true. What is the workaround for this?

Answer 1

You can do:

<input type='text' {...(condition ? {id: 'test'} : {})} />

Answer 2

You can also do:

<input {...(hello && { id: 'test' })} />

Answer 3

You can do something like this:

const props = {
  type: 'text'
}

if (condition) props.id = 'test'

return <input {...props} />