How to fix Warning: React does not recognize the `%s` prop on a DOM element. in React

// ❌ WRONG - passing custom prop to div
function MyComponent({ isActive, children }) {
  return (
    <div isActive={isActive}>
      {children}
    </div>
  );
}

// ✅ CORRECT - extract custom prop
function MyComponent({ isActive, children }) {
  return (
    <div className={isActive ? 'active' : ''}>
      {children}
    </div>
  );
}

// ✅ CORRECT - using data-* attribute for custom data
function MyComponent({ isActive, children }) {
  return (
    <div data-active={isActive}>
      {children}
    </div>
  );
}

// ❌ WRONG - spreads all props including custom ones
function Button({ children, ...props }) {
  return <button {...props}>{children}</button>;
}

// ✅ CORRECT - filter custom props
function Button({ variant, size, children, ...props }) {
  // variant and size are extracted, only DOM props remain in ...props
  const className = `btn btn-${variant} btn-${size}`;
  return (
    <button className={className} {...props}>
      {children}
    </button>
  );
}

// ✅ CORRECT - using a helper function to filter props
import { pickHTMLAttributes } from './utils';

function MyComponent(props) {
  const htmlProps = pickHTMLAttributes(props);
  const customProps = { /* extract custom props */ };
  
  return <div {...htmlProps}>{/* ... */}</div>;
}

// Instead of custom props, use standard attributes:

// ❌ Custom boolean prop
<div isVisible={true}>

// ✅ Use hidden attribute or CSS class
<div hidden={!isVisible}>
<div className={isVisible ? 'visible' : 'hidden'}>

// ❌ Custom string prop
<div variant="primary">

// ✅ Use data-* attribute or CSS class
<div data-variant="primary">
<div className="variant-primary">

// ❌ Custom event-like prop
<div onCustomEvent={handler}>

// ✅ Use standard events or data-* with event delegation
div.addEventListener('click", handler)
// Or pass as data attribute and handle in parent
<div data-custom-event="true">

// Good pattern for wrapper components
function InputWrapper({
  label,
  error,
  helperText,
  // Extract Input-specific props
  value,
  onChange,
  type,
  // DOM props for the wrapper div
  className,
  style,
  ...rest
}) {
  return (
    <div className={`input-wrapper ${className}`} style={style}>
      {label && <label>{label}</label>}
      <input
        value={value}
        onChange={onChange}
        type={type}
        {...rest} // Only DOM props for input remain
      />
      {error && <div className="error">{error}</div>}
      {helperText && <div className="helper-text">{helperText}</div>}
    </div>
  );
}

// Usage
<InputWrapper
  label="Email"
  value={email}
  onChange={handleEmailChange}
  type="email"
  placeholder="Enter your email"
  required
/>

// If a library component passes invalid props:
import { ThirdPartyButton } from 'some-library';

// Check if the library has a prop filter option
<ThirdPartyButton
  variant="primary"
  filterInvalidProps={true}
/>

// Or wrap it to filter props yourself
function SafeButton(props) {
  const { variant, size, ...rest } = props;
  const className = `btn-${variant} btn-${size}`;
  
  return (
    <ThirdPartyButton
      className={className}
      {...rest}
    />
  );
}

// For styled-components or emotion, use transient props
const StyledButton = styled.button`
  // Use transient prop syntax ($$ prefix)
  background: ${props => props.$variant === 'primary' ? 'blue' : 'gray'};
`;

// Usage with transient prop
<StyledButton $variant="primary">Click</StyledButton>

// ❌ WRONG - ref gets passed as prop
function MyInput(props) {
  return <input {...props} />;
}

// ✅ CORRECT - use forwardRef
const MyInput = React.forwardRef(function MyInput(props, ref) {
  const { variant, size, ...rest } = props;
  const className = `input input-${variant} input-${size}`;
  
  return (
    <input
      ref={ref}
      className={className}
      {...rest}
    />
  );
});

// ✅ CORRECT - TypeScript with forwardRef
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  variant?: 'default' | 'primary';
  size?: 'sm' | 'md' | 'lg';
}

const MyInput = React.forwardRef<HTMLInputElement, InputProps>(
  ({ variant = 'default', size = 'md', ...props }, ref) => {
    const className = `input input-${variant} input-${size}`;
    return <input ref={ref} className={className} {...props} />;
  }
);

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

module.exports = {
  plugins: ['react'],
  rules: {
    'react/no-unknown-property': ['error', { ignore: ['data-*', 'aria-*'] }],
    'react/jsx-props-no-spreading': ['error', {
      html: 'ignore',
      custom: 'enforce',
      exceptions: []
    }]
  }
};

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
  // Custom props are separated from HTML props
}