ReactJS Whitespace text nodes cannot appear as a child of <tr>. Make sure you don't have any extra whitespace between tags on each line of

Question

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>
  </>
);

Answer 1

Near the end of your code example you have:

</TableCell>{' '}

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