validateTextNesting() — react Function Reference

Architecture documentation for the validateTextNesting() function in validateDOMNesting.js from the react codebase.

Function javascript BabelCompiler Validation calls 3 called by 1

Entity Profile

BabelCompiler→ Validation→ validateTextNesting() — react Function Reference

Dependency Diagram

graph TD
  9805d2a0_a12e_fb58_a873_c63b02425b81["validateTextNesting()"]
  99b6f05f_c8d3_afa4_842b_34ebebb1f8a7["validateDOMNesting.js"]
  9805d2a0_a12e_fb58_a873_c63b02425b81 -->|defined in| 99b6f05f_c8d3_afa4_842b_34ebebb1f8a7
  5a792874_dbaf_1dd0_9e62_d6a16580e0b5["setProp()"]
  5a792874_dbaf_1dd0_9e62_d6a16580e0b5 -->|calls| 9805d2a0_a12e_fb58_a873_c63b02425b81
  af0fc495_4d30_0fb4_1034_e516045de3b8["isTagValidWithParent()"]
  9805d2a0_a12e_fb58_a873_c63b02425b81 -->|calls| af0fc495_4d30_0fb4_1034_e516045de3b8
  efcb6d17_b35d_e8c2_bc5c_34ef4aeaa0a1["findAncestor()"]
  9805d2a0_a12e_fb58_a873_c63b02425b81 -->|calls| efcb6d17_b35d_e8c2_bc5c_34ef4aeaa0a1
  330a083b_035c_adf8_6bc7_857221a6c608["describeAncestors()"]
  9805d2a0_a12e_fb58_a873_c63b02425b81 -->|calls| 330a083b_035c_adf8_6bc7_857221a6c608
  style 9805d2a0_a12e_fb58_a873_c63b02425b81 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/client/validateDOMNesting.js lines 643–691

function validateTextNesting(
  childText: string,
  parentTag: string,
  implicitRootScope: boolean,
): boolean {
  if (__DEV__) {
    if (implicitRootScope || isTagValidWithParent('#text', parentTag, false)) {
      return true;
    }

    const warnKey = '#text|' + parentTag;
    if (didWarn[warnKey]) {
      return false;
    }
    didWarn[warnKey] = true;

    const child = current;
    const ancestor = child ? findAncestor(child, parentTag) : null;

    const ancestorDescription =
      child !== null && ancestor !== null
        ? describeAncestors(
            ancestor,
            child,
            child.tag !== HostText ? {children: null} : null,
          )
        : '';

    if (/\S/.test(childText)) {
      console.error(
        'In HTML, text nodes cannot be a child of <%s>.\n' +
          'This will cause a hydration error.%s',
        parentTag,
        ancestorDescription,
      );
    } else {
      console.error(
        'In HTML, whitespace text nodes cannot be a child of <%s>. ' +
          "Make sure you don't have any extra whitespace between tags on " +
          'each line of your source code.\n' +
          'This will cause a hydration error.%s',
        parentTag,
        ancestorDescription,
      );
    }
    return false;
  }
  return true;
}