CODEWITHSUNDEEP
htmlreactjsbootstrap-4
cyber-leech
cyber-leech

Reputation: 37

How do you get rid of the " Text nodes cannot appear as a child of <tbody>" warning in React?

I came across some answers saying that the error has something to do with white spaces, but none of the data from the API endpoint has any white spaces.

Others say the issue is with the child elements, but I can't see what's wrong inside the <tbody> tag.

app.js:39625 Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tbody>.
    in tbody (created by SaleList)
    in table (created by SaleList)
    in div (created by SaleList)
    in div (created by SaleList)
    in SaleList (created by Context.Consumer)
    in Route (created by App)
    in SaleContextProvider (created by App)
    in div (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App

SaleList.js

import React, { useContext } from 'react';
import { SaleContext } from '../../contexts/SaleContext';
import Sale from './Sale';

const SaleList = () => {
    const { state } = useContext(SaleContext);
    const { sales } = state;

    sales.length ? console.log(sales) : null;

    const saleList = sales.length ? sales.map((sale, i) => {
        return (
            <Sale key={sale.id} data={sale} rowNumber={i + 1} />
        );
    }) : 'N/A';

    return (
        <div className="container">
            <div className="item-list">
                <h1>Sales</h1>

                <table className="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Date</th>
                            <th scope="col">Customer</th>
                            <th scope="col">Item</th>
                            <th scope="col">Quantity</th>
                            <th scope="col">Price</th>
                            <th scope="col">Total</th>
                        </tr>
                    </thead>

                    <tbody>
                        {saleList}
                    </tbody>
                </table>
            </div>
        </div>
    );
}

export default SaleList;

Sale.js

import React from 'react';

const Sale = ({ data, rowNumber }) => {
    const sale = (
        <tr>
            <th scope="row">{rowNumber}</th>
            <td>{}</td>
            <td>{data.customer.name}</td>
            <td>{data.item}</td>
            <td>{data.quantity}</td>
            <td>${data.price.toLocaleString('en-US')}</td>
            <td>${(data.quantity * data.price).toLocaleString('en-US')}</td>
        </tr>
    );

    return sale;
}

export default Sale;

Upvotes: 0

Views: 135

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

You can try changing the N/A to a table row...

const saleList = sales.length ? sales.map((sale, i) => {
    return (
        <Sale key={sale.id} data={sale} rowNumber={i + 1} />
    );
}) : '<tr><td colspan="7">N/A</td></tr>';

Upvotes: 2

Related Questions