Whitespace text nodes cannot appear as a child of <table>

When I want to create a React table from a multi line string I will get a warning from React:

index.js:1452 Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <table>. Make sure you don't have any extra whitespace between tags on each line of your source code.

Example code that will trigger the error

render() {
  const table = parser.parse(`
    <table>
      <tbody>
        <tr>
          <td>Lorem Ipsum</td>
        </tr>
      </tbody>
    </table>
  `);

  return (
    <React.Fragment>
      {table}
    </React.Fragment>
  );

Off course I can fix this warning by writing the table on one line, but that is not the solution where I’m looking for. const table = parser.parse('<table><tbody><tr><td>Lorem Ipsum</td></tr></tbody></table>');

With dangerouslySetInnerHTML I can use a multi line string without any problems. I also tried the package html-react-parser but it will have the same problem.

Thanks for your time and help, Ben

Issue Analytics

State:
Created 5 years ago
Comments:12 (4 by maintainers)

Top GitHub Comments

1reaction

nvenegascommented, Sep 15, 2019

You should alternatively be able to use a custom processing instruction to drop whitespace text nodes.

In case it isn’t clear how to drop whitespace nodes, here’s a TypeScript example:

import { DomElement } from 'htmlparser2';

function isDescendantTableTag(parent: Pick<DomElement, 'name'>, node: Pick<DomElement, 'name'>): boolean {
  const descendants: Record<string, string[]> = {
    table: ['colgroup', 'thead', 'tbody'],
    colgroup: ['col'],
    thead: ['tr'],
    tbody: ['tr'],
    tr: ['th', 'td'],
  };

  if (!parent.name || !node.name) {
    return false;
  }

  return (descendants[parent.name] || []).indexOf(node.name) >= 0;
}

const ignoreWhitespaceBetweenTableTags = {
  shouldProcessNode(node: Pick<DomElement, 'next' | 'parent' | 'prev' | 'type'>) {
    if (node.type === 'text' && node.parent) {
      if (node.next) {
        return isDescendantTableTag(node.parent, node.next);
      }
      if (node.prev) {
        return isDescendantTableTag(node.parent, node.prev);
      }
    }
    return false;
  },
  processNode() {
    return null;
  },
};

0reactions

constantindjonkamcommented, Oct 13, 2021

On my end. I removed all spaces in between my fragment.

Top Results From Across the Web

validateDOMNesting: #text cannot appear as a child of <tr ...

So, any text to be displayed inside a table row must be placed inside <td> ... Whitespace text nodes cannot appear as a...

Whitespace text nodes cannot appear as a child of <tbody ...

Error 2. Whitespace text nodes cannot appear as a child of <tbody>. Make sure you don't have any extra whitespace between tags on...

validateDOMNesting: #text cannot appear as a child of <tr ...

Whitespace text nodes cannot appear as a child of <tbody> . Make sure you don't have any extra white space between tags on...

React DOM elements should be nested properly - DeepScan

React Warning: validateDOMNesting(…): Whitespace text nodes cannot appear as a child of <tr>. Make sure you don't have any extra whitespace ...

validatedomnesting(...): <div> cannot appear as a child of ...

Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tr>. Make sure you don't have any extra whitespace between tags on...