Table Body in Semantic UI React with No Table Rows Causing validateDomNesting Error

Question

I've gone through all of the example questions on this and can't seem to figure out what my problem is.

Here is the full error:

index.js:1375 Warning: validateDOMNesting(...): Text nodes cannot appear as a child of .
    in tbody (created by TableBody)
    in TableBody (at Favorites.js:167)
    in table (created by Table)
    in Table (at Favorites.js:123)
    in Favorites (created by ConnectFunction)
    in ConnectFunction (at App.js:73)
    in Route (at App.js:69)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:46)
    in div (created by Container)
    in Container (at App.js:44)
    in App (created by ConnectFunction)
    in ConnectFunction (at src/index.js:10)
    in Provider (at src/index.js:9)

and my full code

import React, { useState, useEffect } from "react";
import Search from "./Search";
import { connect } from "react-redux";
import {
  Table,
  Popup,
  Responsive,
  Button,
  Segment,
  Header,
  Image
} from "semantic-ui-react";
import { searchChange } from "../reducers/searchReducer";
import { fetchData } from "../reducers/baseballReducer";
import { removeFavorite } from "../reducers/favoriteReducer";
import { getFavorites } from "../reducers/favoriteReducer";
import { getUpdates } from "../reducers/updateReducer";
import { setNotification } from "../reducers/notificationReducer";
import _ from "lodash";
var moment = require("moment");
moment().format();

//Filter 'favupdates' state for user's input
const searchCards = ({ favUpdates, search }) => {
  return search
    ? favUpdates.filter(a =>
        a.title
          .toString()
          .toLowerCase()
          .includes(search.toLowerCase())
      )
    : favUpdates;
};

const style = {
  borderRadius: 0,
  padding: "2em"
};

const Favorites = props => {
  useEffect(() => {
    document.title = "My Favorites | All Vintage Search";
  }, []);

  useEffect(() => {
    props.getFavorites(props.loggedUser.id);
  }, [props.loggedUser]);

  //Set 'filteredData' state
  useEffect(() => {
    setData(props.cardsToShow);
  }, [props]);

  const mapFAVS = props.favorites;
  const data = Array.from(mapFAVS);
  const updatedFavs = data.map(item => item.id);
  const formatFavs = updatedFavs.map(id => id.join(","));
  console.log("FORMAT FAVS", formatFavs);

  //Get updated data from eBay based on user's favorite id's and update 'favUpdates' state
  useEffect(() => {
    props.getUpdates(formatFavs);
  }, [props.favorites]);

  const [column, setColumn] = useState(null);
  const [direction, setDirection] = useState(null);
  const [filteredData, setData] = useState(props.cardsToShow);

  console.log("Filtered Data", filteredData);

  const handleSortNumeric = clickedColumn => {
    const sorter = data => parseInt(data[clickedColumn]);
    setData(_.sortBy(filteredData, sorter));
  };

  const handleSortReverse = () => {
    const sorter = data => parseInt(data);
    setData(_.sortBy(filteredData, sorter).reverse());
  };

  const handleSort = clickedColumn => {
    if (column !== clickedColumn) {
      setColumn(clickedColumn);
      if (clickedColumn === "title" || "acceptsOffers" || "timeStamp") {
        setData(_.sortBy(filteredData, [clickedColumn]));
      } else {
        handleSortNumeric(clickedColumn);
      }
      setDirection("ascending");
      return;
    }

    if (clickedColumn === "title") {
      setData(_.sortBy(filteredData.reverse()));
    } else {
      handleSortReverse();
    }

    direction === "ascending"
      ? setDirection("descending")
      : setDirection("ascending");
  };

  const removeFavorite = card => {
    props.removeFavorite(card, props.loggedUser);
    props.setNotification(`You removed ${card.title}!`, 5);
  };

  if (!props.cardsToShow) return null;

  return (
    <>
      
      
        
          My Favorites
        
      
      Count: {props.cardsToShow.length}
      
        Click to Sort:
      
      
          
             handleSort("title")}
            >
              Card Title
            
             handleSort("updatedBids")}
            >
              # Bids
            
             handleSort("updatedPrice")}
            >
              Price
            
             handleSort("timeStamp")}
            >
              Time Left
            
             handleSort("status")}
            >
              Status
            
            
              Remove
            
          
        
          {!filteredData
            ? "Sorry No Cards Found"
            : filteredData.map(card => (
                <>
                  
                        
                          
                            
                              
                                
                                  
                                    
                                      VIEW
                                    
                                  
                                
                              
                              
                            
                            
                              
                              
                                {card.title}
                              
                              
                                
                                   Ends in{" "}
                                  {moment
                                    .duration(card.timeLeft, "minutes")
                                    .humanize()}
                                
                                
                                  
                                    
                                  
                                  
                                    {" "}
                                    
                              
                            
                            
                              
                                
                                  
                                
                                
                                  {card.updatedBids}
                                
                              
                              
                                
                                  {card.status}
                                
                                
                                  
                                
                              
                            
                          
                        
                  
                  
                    
                          
                            {card.title}
                          
                        
                      }
                      content={
                        
                      }
                      style={style}
                      size="small"
                      position="left center"
                    >
                    
                      {card.updatedBids}
                    
                    
                      ${card.updatedPrice}
                    
                    
                      {moment.duration(card.timeLeft, "minutes").humanize()}
                    
                    {card.status}
                    
                      
        
        
    
  );
};

const mapStateToProps = state => {
  return {
    baseball: state.baseball,
    favorites: state.favorites,
    favUpdates: state.favUpdates,
    loggedUser: state.loggedUser,
    page: state.page,
    entries: state.entries,
    query: state.query,
    pageOutput: state.pageOutput,
    search: state.search,
    cardsToShow: searchCards(state)
  };
};

const mapDispatchToProps = {
  searchChange,
  fetchData,
  removeFavorite,
  getFavorites,
  getUpdates,
  setNotification
};

export default connect(mapStateToProps, mapDispatchToProps)(Favorites);

I suspected the issue might be where i'm using the section as I dont have any table rows or cells set within the Table Body. I tried wrapping that whole section with a Table.Row and a Table.Cell, but still getting the same error. Any ideas?

wbd · Accepted Answer

If !filteredData === false then the only child of is text.

As the error says, the table body cannot have text as a child.

Wrap the text like this Sorry no cards shown

Table Body in Semantic UI React with No Table Rows Causing validateDomNesting Error

Answers (1)

Related Questions