How to fix Invalid className or CSS property in React

<div class="container">
  <button class="btn btn-primary">Click me</button>
</div>

<div className="container">
  <button className="btn btn-primary">Click me</button>
</div>

// Template literal approach
<div className={`container ${isActive ? 'active' : ''}`}>

// Using classnames library
import classNames from 'classnames';
<div className={classNames('container', { active: isActive })}>

<div style={{ background-color: '#fff', font-size: '16px', min-height: '100px' }}>
  Content
</div>

<div style={{ backgroundColor: '#fff', fontSize: '16px', minHeight: '100px' }}>
  Content
</div>

// Before
<label for="username">Username</label>

// After
<label htmlFor="username">Username</label>

npm install --save-dev eslint-plugin-react

{
  "extends": ["plugin:react/recommended"],
  "rules": {
    "react/no-unknown-property": "error"
  }
}

import React from 'react';

// TypeScript will error on 'class' prop
const MyComponent: React.FC = () => {
  return <div class="container">Content</div>; // ❌ Type error
};

// Correct usage
const MyComponent: React.FC = () => {
  return <div className="container">Content</div>; // ✅ Valid
};

const styles: React.CSSProperties = {
  backgroundColor: '#fff', // ✅ Valid
  'background-color': '#fff' // ❌ Type error
};

// Some libraries might accept 'class' prop and need updating
<ThirdPartyComponent class="custom" /> // Check library docs

// Most modern libraries use className
<ThirdPartyComponent className="custom" />

# Find all files with class= in JSX
grep -r 'class=' src/ --include="*.jsx" --include="*.tsx"

# Find inline styles with hyphens
grep -r 'style={{[^}]*-[^}]*}}' src/ --include="*.jsx" --include="*.tsx"

# Replace class= with className= in all JSX files
find src -name "*.jsx" -o -name "*.tsx" | xargs sed -i 's/class=/className=/g'