How to fix CSS property not valid in React

function MyComponent({ containerWidth }) {
  // Bad: May result in NaN if containerWidth is invalid
  const width = parseFloat(containerWidth) / 2;

  // Good: Validate and provide fallback
  const width = !isNaN(parseFloat(containerWidth))
    ? parseFloat(containerWidth) / 2
    : 100; // Default fallback

  return <div style={{ width }}>{/* content */}</div>;
}

// Bad: React cannot convert numbers to non-px units
<div style={{ width: 50, height: 100 }}>  {/* Results in width: 50px, height: 100px */}

// Bad: Trying to use percentage as number
<div style={{ width: 50% }}>  {/* Syntax error */}

// Good: Use strings for non-px units
<div style={{
  width: '50%',
  height: '100vh',
  padding: '2em',
  margin: '1rem'
}}>

// Good: Construct strings dynamically for computed percentages
const widthPercent = `${(containerWidth / totalWidth) * 100}%`;
<div style={{ width: widthPercent }}>

// Unitless properties that accept plain numbers:
<div style={{
  opacity: 0.5,        // Not "0.5" or "0.5px"
  zIndex: 100,         // Not "100"
  flex: 1,             // Not "1"
  flexGrow: 2,         // Not "2"
  flexShrink: 1,       // Not "1"
  fontWeight: 700,     // Not "700"
  lineHeight: 1.5,     // Not "1.5"
  order: 3             // Not "3"
}}>

// Wrong: Adding units to unitless properties
<div style={{
  opacity: '0.5px',    // Invalid
  zIndex: '100px',     // Invalid
  flex: '1px'          // Invalid
}}>

// Bad: May be undefined on first render
function Component({ width }) {
  return <div style={{ width }}>{/* content */}</div>;
}

// Good: Provide default props
function Component({ width = 200 }) {
  return <div style={{ width }}>{/* content */}</div>;
}

// Good: Use nullish coalescing for state
function Component() {
  const [height, setHeight] = useState(null);

  return (
    <div style={{
      height: height ?? 100  // Use 100 if height is null/undefined
    }}>
      {/* content */}
    </div>
  );
}

// Wrong: CSS syntax in object
<div style={{
  "width": "100px";
  "height": "50px";
}}>

// Wrong: Semicolons in values
<div style={{
  width: '100px;',
  height: '50px;'
}}>

// Correct: JavaScript object syntax
<div style={{
  width: '100px',
  height: '50px'
}}>

// Correct: CamelCase property names
<div style={{
  backgroundColor: '#fff',  // Not background-color
  fontSize: '16px',         // Not font-size
  borderRadius: '4px'       // Not border-radius
}}>

function Component({ data }) {
  const computedWidth = calculateWidth(data);
  const computedHeight = data.height / data.scale;

  // Debug: Log values to see what's being computed
  console.log('Style values:', {
    width: computedWidth,
    height: computedHeight,
    isWidthValid: !isNaN(computedWidth),
    isHeightValid: !isNaN(computedHeight)
  });

  const style = {
    width: computedWidth,
    height: computedHeight
  };

  return <div style={style}>{/* content */}</div>;
}

import { CSSProperties } from 'react';

interface ComponentProps {
  width?: number | string;
}

function Component({ width = 200 }: ComponentProps) {
  // TypeScript ensures style object matches CSSProperties interface
  const style: CSSProperties = {
    width: typeof width === 'number' ? width : width,
    // TypeScript will error if you try: opacity: '0.5px'
    opacity: 0.5,
    // TypeScript will error if you try: zIndex: '100'
    zIndex: 100
  };

  return <div style={style}>{/* content */}</div>;
}