Source:  Twitter logo

I'm getting Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of . Make sure you don't have any extra whitespace between tags on each line of your source code. when I'm trying to implement table with materialUI in ReactJS. Erro says white space found in code line around < TableRow.. But I can't find any white space in error line.

return (
  <>
    <TableRow
      key={this.props.data.id}
      className="simpleProductRow align-top">
      <TableCell className="simpleProductInfo simpleProductCell">
        <Typography variant="body2" component="p">
          <Typography
            variant="body2"
            component="label"
            style={inlineBlockStyle}
          >
            Info:{' '}
          </Typography>
          <Typography className="simpleProductName" component="span">
            {this.props.data.name}
          </Typography>
        </Typography>

        <Typography variant="body2" component="span">
          <Typography variant="body2" style={inlineBlockStyle}>
            Part #:{' '}
          </Typography>
          <Typography style={inlineBlockStyle}>
            {this.props.data.sku}
          </Typography>
          <Typography style={inlineBlockStyleSmall}>
            (Mfr #: {this.props.data.manufacturerPartNumber})
          </Typography>
        </Typography>
        <Typography variant="body2" component="p">
          <Typography
            variant="body2"
            component="label"
            style={inlineBlockStyle}
          >
            Ships:{' '}
          </Typography>
          <Typography style={inlineBlockStyle} component="span">
            {' '}
            {this.props.data.deliveryDate}
          </Typography>
        </Typography>

        {this.props &&
          this.props.data &&
          this.props.data.isFreeShipping && (
            <Chip
              className={this.props.classes.freeShippingChip}
              label="Free Shipping"
              avatar={freeshippingavatar}
            />
          )}
      </TableCell>{' '}

    </TableRow>
    <TableRow>
      <TableCell colSpan={4}>
        <ProductSpecifications data={this.props && this.props.data} />
      </TableCell>
    </TableRow>
  </>
);

Near the end of your code example you have:

</TableCell>{' '}

You need to remove the {' '} at the end. It is a “whitespace text node”.

7 users liked answer #0dislike answer #07
Ryan Cogswell profile pic
Ryan Cogswell

In my case, when I use useState like this, it gives the same error.

const [items,setItems] = useState("");

To get rid of this, I had to make it like this

const [items,setItems] = useState([]);
0 users liked answer #1dislike answer #10
Sesen profile pic
Sesen

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).