Don't use incorrect casing for DOM attributes and properties in React

DOM attributes and properties in React must be used camel-cased

CheckId	RCT010113
TypeName	ReactPropertyNameRule
Severity	Error
Type	React component

Resolution

DOM attributes and properties in React must be used camel-cased. Additionally, data- and aria- attributes must be lowercased.

Bad practice (class used instead of className)

export class Message extends React.Component {
    render() {
        return <div class="font-weight: bold;">{this.props.message}</div>;
    }
}

Good practice (className property used to specify inline CSS styles)

export class Message extends React.Component {
    render() {
        return <div className={{ fontWeight: 'bold' }}>{this.props.message}</div>;
    }
}

Bad practice (lowercase property for the click event handler)

export class Feedback extends React.Component {
    render() {
        return <button onclick="alert(1)">Submit</button>;
    }
}

Good practice (camel-cased property for the click event handler)

export class Feedback extends React.Component {
    render() {
        return <button onClick={submitFeedback}>Submit</button>;
    }
}

Bad practice (uppercase letters in the data attribute)

export class Item extends React.Component {
    render() {
        return <div data-userInfo="user">Item</div>;
    }
}

Good practice (lowercase name of a data attribute)

export class Item extends React.Component {
    render() {
        return <div data-userinfo="user">Item</div>;
    }
}