Как избавиться от предупреждения «Текстовые узлы не могут отображаться как дочерние элементы <tbody>» в React?

Question

Я сталкивался с некоторыми ответами о том, что ошибка связана с пробелами, но ни в одном из данных конечной точки API нет пробелов.

Другие говорят, что проблема связана с дочерними элементами,но я не вижу, что не так внутри тега <tbody>.

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;

Answer 1

Вы можете попробовать изменить N / A на строку таблицы ...

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>';