Add custom HTML attributes with no value to JSX

Question

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?

skwidbreth · Accepted Answer · 2017-08-14 22:17:03Z

1

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}`}>

edited Aug 14, 2017 at 22:17

answered Aug 14, 2017 at 18:05

skwidbreth

8,68012 gold badges62 silver badges115 bronze badges

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

4 Comments

user1189352 Over a year ago

unfortunately didn't work, ty for trying though. i think because active isn't part of the class name? im just guessing..

skwidbreth Over a year ago

@user1189352 Hmm... I've edited my response to make it a more fleshed-out render function - does yours basically look like this? Defining customAttr, then returning the element?

user1189352 Over a year ago

oh snap it worked. i just had a typo on my end. thank you!

skwidbreth Over a year ago

@user1189352 Great! Glad that helped. Don't forget to accept the answer - I think this is a common problem, will be helpful to the community.

Collectives™ on Stack Overflow

Add custom HTML attributes with no value to JSX

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related