facebook/react · error · Error

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

Error message

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

What it means

Thrown by pushStartTextArea when a <textarea> element has a dangerouslySetInnerHTML prop. A textarea's content in HTML is its initial value; setting innerHTML on it is meaningless (the DOM value would override it), so React rejects the combination during server serialization.

Source

Thrown at packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js:2782

  let children = null;
  for (const propKey in props) {
    if (hasOwnProperty.call(props, propKey)) {
      const propValue = props[propKey];
      if (propValue == null) {
        continue;
      }
      switch (propKey) {
        case 'children':
          children = propValue;
          break;
        case 'value':
          value = propValue;
          break;
        case 'defaultValue':
          defaultValue = propValue;
          break;
        case 'dangerouslySetInnerHTML':
          throw new Error(
            '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
          );
        default:
          pushAttribute(target, propKey, propValue);
          break;
      }
    }
  }
  if (value === null && defaultValue !== null) {
    value = defaultValue;
  }

  pushViewTransitionAttributes(target, formatContext);

  target.push(endOfStartTag);

  // TODO (yungsters): Remove support for children content in <textarea>.
  if (children != null) {

View on GitHub (pinned to eafeac097b)

Solutions

  1. Use value/defaultValue: <textarea defaultValue={text} /> (uncontrolled) or value+onChange (controlled)
  2. Remove dangerouslySetInnerHTML from any component that can render a textarea
  3. If the goal was default content, note that React maps that to defaultValue, not children or innerHTML

Example fix

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

// after
<textarea defaultValue={text} />
Defensive patterns

Strategy: validation

Validate before calling

if (process.env.NODE_ENV !== 'production' && props.dangerouslySetInnerHTML != null && tagName === 'textarea') {
  throw new TypeError('textarea does not support dangerouslySetInnerHTML; use value/defaultValue');
}

Type guard

type TextareaProps = Omit<JSX.IntrinsicElements['textarea'], 'dangerouslySetInnerHTML'>;

Prevention

When it happens

Trigger: Server-rendering <textarea dangerouslySetInnerHTML={{__html: text}} /> — usually an attempt to set the textarea's content via raw HTML instead of the value/defaultValue props.

Common situations: HTML-to-JSX conversion of <textarea>some content</textarea> into the wrong prop; generic components that apply dangerouslySetInnerHTML to whatever tag they render; developers unfamiliar with the textarea-as-value model in React.

Related errors


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