React does not recognize the props on a DOM element

[nicuvlad7]

I've been implementing react-table following the tutorials they have on https://react-table.tanstack.com/docs/quick-start . Everything works fine but I get a ton of errors/warning in the console regarding REACT DOM not being able to render the props that I send to the component.

Code example

on a closer look in the console, every single prop that the react-table component expects is throwing a warning.

Any help on how can I fix those warnings? I put a link to the complete code example above.

  
const IndeterminateCheckbox = React.forwardRef(
    ({ indeterminate, ...rest }, ref) => {
        const defaultRef = React.useRef();
        const resolvedRef = ref || defaultRef;
        React.useEffect(() => {
            resolvedRef.current.indeterminate = indeterminate;
        }, [resolvedRef, indeterminate]);

        return (
            <>
                <input type="checkbox" ref={resolvedRef} {...rest} />
            </>
        );
    }
);

const handleEdit = (e) => {
    console.log(e);
};

function Table({ columns, data }) {

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        prepareRow,
        page,
        canPreviousPage,
        canNextPage,
        pageOptions,
        pageCount,
        gotoPage,
        nextPage,
        previousPage,
        setPageSize,
        selectedFlatRows,
        state,
        setGlobalFilter
    } = useTable(
        {
            columns,
            data,
        },
        useFilters,
        useGlobalFilter,
        useSortBy,
        usePagination,
        useRowSelect,
        (hooks) => {
            hooks.visibleColumns.push((columns) => [
                {
                    id: "selection",
                    // The header can use the table's getToggleAllRowsSelectedProps method
                    // to render a checkbox
                    // Header: ({ getToggleAllPageRowsSelectedProps }) => (
                    //     <div>
                    //         <IndeterminateCheckbox {...getToggleAllPageRowsSelectedProps()} />
                    //     </div>
                    // ),
                    // The cell can use the individual row's getToggleRowSelectedProps method
                    // to the render a checkbox
                    Cell: ({ row }) => (
                        <div>
                            <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
                        </div>
                    )
                },
                ...columns,
                {
                    id: "edit",
                    Cell: ({ row }) => (
                        <div>
                            <button onClick={() => handleEdit(row)}>Edit</button>
                        </div>
                    )
                }
            ]);
        }
    );
    const { pageIndex, pageSize, selectedRowIds, globalFilter } = state;
    // Render the UI for your table
    return (
        <>
            <div className="table-nav">
               <div className="filters">
                   <GlobalSearch className="item" filter={globalFilter} setFilter={setGlobalFilter} />
                   <select
                       value={pageSize}
                       onChange={(e) => {
                           setPageSize(Number(e.target.value));
                       }}
                   >
                       {[10, 20, 30, 40, 50].map((pageSize) => (
                           <option key={pageSize} value={pageSize}>
                               Show {pageSize}
                           </option>
                       ))}
                   </select>
               </div>
               <div className="actions">
                   <button onClick={() => saveChanges(selectedFlatRows)}>
                       Delete
                   </button>
                   <button onClick={() => saveChanges(selectedFlatRows)}>
                       Assign
                   </button>
                   <button onClick={() => saveChanges(selectedFlatRows)}>
                       Create
                   </button>
               </div>
            </div>
            <table {...getTableProps()}>
                <thead>
                {headerGroups.map((headerGroup) => {
                        return(
                            <>
                                <tr {...headerGroup.getHeaderGroupProps()}>
                                    {headerGroup.headers.map((column) => (
                                        <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                                            {column.render("Header")}
                                            <span> {
                                                column.isSorted ? (column.isSortedDesc ? '-' : '+') : ''
                                            }</span>
                                        </th>
                                    ))}
                                </tr>
                            </>
                        )
                    }
                )}
                </thead>
                <tbody {...getTableBodyProps()}>
                {page.map((row, i) => {
                    prepareRow(row);
                    return (
                        <tr {...row.getRowProps()}>
                            {row.cells.map((cell) => {
                                const {column} = cell;
                                let td = column.id === "templateName" ? (
                                    <td {...cell.getCellProps(column)}>
                                        <a href="#">{cell.render("Cell")}</a>
                                    </td>
                                ) : (
                                    <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                                );
                                return (
                                    td
                                );
                            })}
                        </tr>
                    );
                })}
                </tbody>
            </table>
            {/*
        Pagination can be built however you'd like.
        This is just a very basic UI implementation:
      */}
            <div className="pagination">
                <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
                    {"<<"}
                </button>{" "}
                <button onClick={() => previousPage()} disabled={!canPreviousPage}>
                    {"<"}
                </button>{" "}
                <button onClick={() => nextPage()} disabled={!canNextPage}>
                    {">"}
                </button>{" "}
                <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
                    {">>"}
                </button>{" "}
                <span>
          Page{" "}
                    <strong>
            {pageIndex + 1} of {pageOptions.length}
          </strong>{" "}
        </span>
                <span>
          | Go to page:{" "}
                    <input
                        type="number"
                        defaultValue={pageIndex + 1}
                        onChange={(e) => {
                            const page = e.target.value ? Number(e.target.value) - 1 : 0;
                            gotoPage(page);
                        }}
                        style={{ width: "100px" }}
                    />
        </span>{" "}
                <pre>
          <code>
            {JSON.stringify(
                {
                    selectedRowIds: selectedRowIds,
                    "selectedFlatRows[].original": selectedFlatRows.map(
                        (d) => d.original
                    )
                },
                null,
                2
            )}
          </code>
        </pre>
            </div>
        </>
    );
}

const saveChanges = (selectedRowIds) => {
    console.log("CHANGES: ", selectedRowIds);
};

function TemplateList() {
    const columns = useColumns();

    const data = React.useMemo(() => makeData(100000), []);

    return (
        <Table
            columns={columns}
            data={data}
        />
    );
}

export default TemplateList;

Warnings:

Warning: React does not recognize the `Header` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `header` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Warning: React does not recognize the `getHeaderProps` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `getheaderprops` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Warning: React does not recognize the `Footer` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `footer` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Warning: React does not recognize the `Cell` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `cell` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[smcalilly]

I had a similar issue. Are you passing any callbacks into the table object which might be undefined? That was my problem.

Your code sandbox example is erroring at line 181:

<td {...cell.getCellProps(column)}>

I looked into whatever might or might not be passed as an argument into the getCellProps() function. It appears that you don't need the column argument.

[golddydev]

You can solve the issue by downgrading my version of styled-components to v5.3.3

What happens is that react-data-table-component is using an old version of styled-components. So, to remove the errors downgrade styled-components to v5.3.3. Also, there's a PR on react-data-table-component repository for this problem, but it hasn't been merged yet.

[matiasagbenitez]

Thanks a lot!! You helped me solve my problem!! 💯 🥇

[purnas2016]

thanks a lot!! saved me big time!