facebook/react · error · Error

91

91

Error message

`dangerouslySetInnerHTML` does not make sense on <textarea>.

What it means

<textarea> manages its content exclusively through the value/defaultValue props (mirroring its DOM behavior where the initial children become the default value). React's initial-properties path for textarea throws if you pass a non-null dangerouslySetInnerHTML, because injecting raw HTML into a textarea's body is meaningless — the DOM ignores it in favor of the value.

Source

Thrown at packages/react-dom-bindings/src/client/ReactDOMComponent.js:1338

        switch (propKey) {
          case 'value': {
            value = propValue;
            // This is handled by initTextarea below.
            break;
          }
          case 'defaultValue': {
            defaultValue = propValue;
            break;
          }
          case 'children': {
            children = propValue;
            // Handled by initTextarea above.
            break;
          }
          case 'dangerouslySetInnerHTML': {
            if (propValue != null) {
              // TODO: Do we really need a special error message for this. It's also pretty blunt.
              throw new Error(
                '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
              );
            }
            break;
          }
          default: {
            setProp(domElement, tag, propKey, propValue, props, null);
          }
        }
      }
      // TODO: Make sure we check if this is still unmounted or do any clean
      // up necessary since we never stop tracking anymore.
      validateTextareaProps(domElement, props);
      initTextarea(domElement, value, defaultValue, children);
      return;
    }
    case 'option': {
      validateOptionProps(domElement, props);

View on GitHub (pinned to eafeac097b)

Solutions

1. Use value or defaultValue instead: <textarea defaultValue={text} />
2. Branch your generic component so textarea never receives the html/dangerouslySetInnerHTML prop
3. If you need rich text editing, use a real editor component (contentEditable-based), not textarea
4. Strip unknown props per tag in wrapper components

Example fix

// before
<textarea dangerouslySetInnerHTML={{__html: initialText}} />

// after
<textarea defaultValue={initialText} />

function TextArea({html, value, defaultValue, ...rest}: Props) {
  // textarea: html is never valid; value/defaultValue only
  const initial = value ?? defaultValue ?? (typeof html === 'string' ? html : undefined);
  return <textarea {...rest} defaultValue={initial} />;
}

const isTextarea = (tag: string) => tag.toLowerCase() === 'textarea';

When it happens

Trigger: <textarea dangerouslySetInnerHTML={{__html: 'text'}} /> on first render; component wrappers that spread an html prop onto a textarea; porting code that set textarea.innerHTML imperatively.

Common situations: Codebases reusing a generic Html component for any tag including textarea; converting legacy innerHTML manipulation into declarative props; template systems that render every field type through one spread.

Related errors

• A React form was unexpectedly submitted. If you called form.
• 61
• 60
• `dangerouslySetInnerHTML` does not make sense on <textarea>.
• 522

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/8d610eb31b3fa4bc. Report an issue: GitHub.