What causes " can only have at most one child." in facebook/react?

Build one string first, then render it:

facebook/react · error · Error

<textarea> can only have at most one child.

Error message

<textarea> can only have at most one child.

What it means

Thrown by pushStartTextArea when a <textarea> receives an array of children with more than one element. A textarea holds a single text value; multiple children (e.g. <textarea>{['a', 'b']}</textarea> or several expressions inside the tag) cannot be unambiguously combined, so Fizz throws while serializing.

Source

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

  // TODO (yungsters): Remove support for children content in <textarea>.
  if (children != null) {
    if (__DEV__) {
      console.error(
        'Use the `defaultValue` or `value` props instead of setting ' +
          'children on <textarea>.',
      );
    }

    if (value != null) {
      throw new Error(
        'If you supply `defaultValue` on a <textarea>, do not pass children.',
      );
    }

    if (isArray(children)) {
      if (children.length > 1) {
        throw new Error('<textarea> can only have at most one child.');
      }

      // TODO: remove the coercion and the DEV check below because it will
      // always be overwritten by the coercion several lines below it. #22309
      if (__DEV__) {
        checkHtmlStringCoercion(children[0]);
      }
      value = '' + children[0];
    }
    if (__DEV__) {
      checkHtmlStringCoercion(children);
    }
    value = '' + children;
  }

  if (typeof value === 'string' && value[0] === '\n') {
    // text/html ignores the first character in these tags if it's a newline
    // Prefer to break application/xml over text/html (for now) by adding

View on GitHub (pinned to eafeac097b)

Solutions

Build one string first, then render it: <textarea defaultValue={`${user.name}\n${user.bio}`} />
Join arrays explicitly: <textarea defaultValue={lines.join('\n')} />
Keep a single expression child at most inside <textarea>

Example fix

// before
<textarea>{user.name}{'\n'}{user.bio}</textarea>

// after
<textarea defaultValue={`${user.name}\n${user.bio}`} />

Defensive patterns

Strategy: validation

Validate before calling

const initialValue = Array.isArray(children) ? children.join('') : children;
if (Array.isArray(children) && children.length > 1) {
  // join explicitly instead of letting React see multiple children
}
return <textarea defaultValue={String(initialValue)} />;

Prevention

Render at most one expression inside <textarea>
Flatten/join multi-part strings before passing them as children
Prefer defaultValue with a precomputed string over JSX children for textareas

When it happens

Trigger: JSX like <textarea>{str}{' suffix'}</textarea>, <textarea>{lines}</textarea> where lines is an array of length > 1, or a children array produced by mapping data inside the tag.

Common situations: Rendering dynamic multi-part strings inside <textarea> (e.g. {user.name}{'\n'}{user.bio}); JSX whitespace/JSX.text fragments that fold into arrays; converted HTML with mixed content inside the tag.

Related errors

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