Custom attributes in React

Question

"If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them." - React docs. https://facebook.github.io/react/docs/jsx-gotchas.html#custom-html-attributes

Is there performance issues or why aren't custom attributes rendered in React?

Answer 1

Because React designed to not pass any data to html attributes, only store data in the state or props of component.

Answer 2

Try this method you can see attribute value in console on click event

//...
   alertMessage (cEvent){
           console.log(cEvent.target.getAttribute('customEvent')); /*display attribute value */
        }
//...

simple add customAttribute as your wish in render method

render(){
    return <div>
//..
    <button customAttribute="My Custom Event Message" onClick={this.alertMessage.bind(this) } >Click Me</button>
            </div>
        }
//...