{"record":{"id":"aeb93edf13ea2d65","repo":"facebook/react","slug":"62","errorCode":"62","errorMessage":"The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.","messagePattern":"The `style` prop expects a mapping from style properties to values, not a string\\. For example, style=(.+?)\\} when using JSX\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-dom-bindings/src/client/CSSPropertyOperations.js","lineNumber":113,"sourceCode":"    } else {\n      if (__DEV__) {\n        checkCSSPropertyStringCoercion(value, styleName);\n      }\n      style[styleName] = ('' + value).trim();\n    }\n  }\n}\n\n/**\n * Sets the value for multiple styles on a node.  If a value is specified as\n * '' (empty string), the corresponding style property will be unset.\n *\n * @param {DOMElement} node\n * @param {object} styles\n */\nexport function setValueForStyles(node, styles, prevStyles) {\n  if (styles != null && typeof styles !== 'object') {\n    throw new Error(\n      'The `style` prop expects a mapping from style properties to values, ' +\n        \"not a string. For example, style={{marginRight: spacing + 'em'}} when \" +\n        'using JSX.',\n    );\n  }\n  if (__DEV__) {\n    if (styles) {\n      // Freeze the next style object so that we can assume it won't be\n      // mutated. We have already warned for this in the past.\n      Object.freeze(styles);\n    }\n  }\n\n  const style = node.style;\n\n  if (prevStyles != null) {\n    if (__DEV__) {\n      validateShorthandPropertyCollisionInDev(prevStyles, styles);","sourceCodeStart":95,"sourceCodeEnd":131,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-dom-bindings/src/client/CSSPropertyOperations.js#L95-L131","documentation":"React's DOM renderer throws this when the style prop is not an object. setValueForStyles(), which React calls for every 'style' prop during mount and update, first checks `styles != null && typeof styles !== 'object'` and throws immediately. HTML allows style as a string (style=\"margin:10px\"), but React requires a JS object mapping CSS property names to values so it can diff and unset properties.","triggerScenarios":"Rendering <div style=\"color:red\">, spreading a props object whose style is a template string (style={cssText}), or passing a number/serialized value. Happens on both initial mount and updates, and identically for custom elements, because both setProp paths route 'style' to setValueForStyles.","commonSituations":"Converting copy-pasted HTML into JSX; CMS/server APIs returning CSS text that is fed straight to style; codemods or template languages (HTL/EJS) that keep HTML string attributes; upgrading from string-inline HTML to components.","solutions":["Change style to an object: style={{marginRight: spacing + 'em'}} with camelCased property names","If the CSS arrives as a string from an API, parse it into an object before rendering (small styleToObject helper or a library like style-to-object)","Make sure spreads ({...props}) do not carry a string style from data or templates","Use hyphenated keys in quotes for vendor properties: style={{'--theme-color': x, WebkitTransform: y}}"],"exampleFix":"// before\n<div style=\"margin: 10px; color: red\">text</div>\n\n// after\n<div style={{margin: '10px', color: 'red'}}>text</div>","handlingStrategy":"type-guard","validationCode":"function isStyleObject(style) {\n  return style == null || (typeof style === 'object' && !Array.isArray(style));\n}\n// before render:\n{isStyleObject(props.style) ? <div style={props.style}/> : <div style={parseStyleString(props.style)}/>}","typeGuard":"function assertStyleProp(style: unknown): React.CSSProperties | null | undefined {\n  if (style == null) return style;\n  if (typeof style !== 'object') {\n    throw new TypeError(`style must be an object, got ${typeof style}`);\n  }\n  return style as React.CSSProperties;\n}","tryCatchPattern":"Not useful: this throws during React's commit phase inside render — catch it at the data boundary instead and normalize style before it reaches JSX.","preventionTips":["Type the prop as React.CSSProperties in your component signatures","Never feed CSS text from APIs straight into style; convert once at the data layer","Lint rule: react/forbid-component-props style strings, or a custom ESLint check for style={{...}} shape"],"tags":["react-dom","style-prop","jsx","props-validation"],"backgroundTag":"invalid-style-prop","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}