React JSX - dynamic html attribute

Question

In JSX, we can indicate attribute value dynamically like:

<div className={this.state.className}>This is a div.</div>

Is it possible to indicate attribute (including attribute name and attribute value) dynamically? Like:

const value = emptyValue ? "" : "value='test'";
<input {value} />

That means, once emptyValue is true, "input" tag should not include "value" attribute (value="" is different from no value attribute, as one is show empty in input field, another is show existing text in input field).

@AndrewLi you are correct. While I want once emptyValue is true, "value" attribute should not exist in the "input". — coderz
– coderz, Commented Mar 28, 2017 at 20:30
You could of course make it an object like: const props = { value: "test", otherProp: "blah" } and then <input {...props}> — Andrew Li
– Andrew Li, Commented Mar 28, 2017 at 21:49

ymek · Accepted Answer · 2018-04-08 12:26:07Z

6

ES6 object expansion only works for objects. Therefore to generate a dynamic attribute, try something like this:

const value = emptyValue ? {} : { value: 'test' }
<a  {...value} ></a>

Note value will always be an object.

edited Apr 8, 2018 at 12:26

ymek

831 silver badge6 bronze badges

answered Mar 28, 2017 at 21:26

AlexeyKuznetsov

4124 silver badges12 bronze badges

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

2 Comments

Andrew Li Over a year ago

But it's a string, not an object.

AlexeyKuznetsov Over a year ago

let obj = {}; if(emptyValue) { obj.value = "test" } <a {...obj} ></a> That is what I am talking about

Lojka · Accepted Answer · 2017-03-29 09:52:02Z

1

you can insert whole element in if statement in render function, but before return like this:

render() {

var input = (<input />);
if (!emptyValue) {
    input = (<input value='test'/>)
}

return (
    <div>
        {input}
    </div>
    )
}

answered Mar 29, 2017 at 9:52

Lojka

1678 bronze badges

Collectives™ on Stack Overflow

React JSX - dynamic html attribute

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related