javascript - What's the correct syntax for Data-Toggle Bootstrap on React.js

Question

So I'm very new to react and javascript in general, I am just trying to lay it out how I see it in HTML

el.button({ 
    type: 'button',
    className: 'navbar-toggle',
    data-toggle: 'collapse', // Syntax Error Here
    data-target: 'navbar' // Syntax Error Here
}, 
el.span({
    className: 'sr-only'
}, 'Toggle Navigation'), 
el.span({
    className: 'icon-bar'
}),
el.span({
    className: 'icon-bar'
}), 
el.span({
    className: 'icon-bar'
})
),

Using purely JS React.JS

Answer 1

From the React docs on Dom Differences which is a bit tucked away,

"All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here since the spec is inconsistent. However, data-* and aria-* attributes conform to the specs and should be lower-cased only."

That helps to determine the cases, which you already have correctly, but since hypens are not allowed for javascript variable names by default we also need to quote the identifiers.

So, using your example, the notation that works for me as of React 0.13.3 is:

el.button({ 
    type: 'button',
    className: 'navbar-toggle',
    "data-toggle": 'collapse', // Syntax Error Here
    "data-target": 'navbar' // Syntax Error Here
},