CODEWITHSUNDEEP
htmlreactjsjsx
user1189352
user1189352

Reputation: 3885

Add custom HTML attributes with no value to JSX

I have some HTML that needs custom attributes with no value dependent on the situation.. for example these are all valid:

<div className="playlist-row" selected>
<div className="playlist-row" active>   
<div className="playlist-row">

i tried doing something like

let customAttr = {'active'};  // incorrect syntax
let customAttr = {'active': true};  //doesn't work
let customAttr = {'active': ''};  //doesn't work

<div className="playlist-row" {...customAttr}>

Any ideas of how I can get this to work?

Upvotes: 0

Views: 192

Answers (1)

skwidbreth
skwidbreth

Reputation: 8454

I believe this should do it - in your render() function:

render() {
    let customAttr = "active"

    return (
        <div className={"playlist-row " + customAttr}>
    )
}

or alternately, you could avoid string concatenation...

<div className={`playlist-row ${customAttr}`}>

Upvotes: 1

Related Questions