We Keep Coding

change animation/css class on button click

import React, { useState } from 'react'
import SliderUp from '#svg/icons/slider-up.svg'
import SliderDown from '#svg/icons/slider-down.svg'
export const Slide=()=> {
// show and hide state on individual button click
const [toggleState, setToggleState] = useState(1);
const toggleTab = (index:number) => {
setToggleState(index);
};
//hover between buttons state through the sliderup and sliderdown button
const changeState = (direction:string) => setToggleState(prev =>
{
const curr = direction === 'down' ? prev + 1 : prev - 1;
return curr < 1 ? 2 : curr > 2 ? 1 : curr
});
return (
<div>
{/* buttons to the left */}
<div>
<button onClick={() => changeState('up')} >
<SliderUp />
</button>
<ul >
<li>
<button className={toggleState===1 ? "inline-block w-3 h-3 " : "inline-block w-1 h-1"} onClick={() => toggleTab(1)} >`
</button>
</li>
<li>
<button className={toggleState===2 ? "inline-block w-3 h-3 " : "inline-block w-1 h-1"}
onClick={() => toggleTab(2)}>
</button>
</li>
</ul>
I want to change components class "animate-slideB" to "animate-slideT" on buttonclick with the state down
<button onClick={() => changeState('down')} >
<SliderDown />
</button>
</div>
{/* components to the right */}
<div>
<div className="w-full ">
{toggleState == 1 &&
<div className='animate-slideB'>
<TopPart/> // component
</div>}
{toggleState == 2 &&
<div className='animate-slideB'>
<MythicCol/> //component
</div>}
</div>
</div>
)
}
I tried this method of adding a function to the button with change state "down" and giving id="sampleDiv" to div elements containing components.But it didnt work.
animate-slideB: animation from top to bottom,
animate-slideT: animation from bottom to top
const handlebuttonclass=()=>{
let sampleElem= document.getElementById("sampleDiv");
if(sampleElem?.className==='animate-slideB'){
sampleElem.className= 'animate-slideT'
}
else{
sampleElem!.className= 'animate-slideB';
}
}

".map is not a function" error in react.js

I have developed a basic todo app using react-dnd. I am trying to get the details from the database and store it in the state. And by using the state I want to map the values retrieieved from the database.
I tried looking into the output using console.log statement, and it was something like this.
However when I try to use the map function like this:
{state.map((item, index) => (
<Draggable
key={item._id}
draggableId={item._id + ""}
index={index}
>
{console.log(item._id, "KEY")}
{(provided) => (
<li
className="list-group-item d-flex justify-content-between align-items-start align-items-center"
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<div className="ms-2 me-auto">
<span className="ml-3 mr-2">
<input
type="checkbox"
className="form-check-input"
id={index}
value={index}
checked={item.selected}
onChange={(e) => {
const target = e.target.value;
const val = state[target].selected;
// console.log(val);
let tmp = Array.from(state);
tmp[target].selected = !val;
// console.log(tmp[target]);
setState(tmp);
// console.log(state);
}}
/>
</span>
<span className="font-weight-bold">{item.title}</span>
</div>
<span>
{/* <i className="bi bi-trash text-danger" /> */}
<button
className="btn btn-sm"
onClick={(e) => {
e.preventDefault();
handleDelete(item._id, index);
}}
>
<i className="bi bi-trash text-danger" />
</button>
</span>
</li>
)}
</Draggable>
Its showing an error as "state.map" is not a function
However I also tried using "state.stage.map()" . Afterwards its showing an error as state.stage is undefined. Is there any proper way of using this .map function?
I have attached the full code here below.
function ProjectsDashboard() {
useEffect(() => {
preload();
}, []);
const [state, setState] = useState([]);
const [todo, setTodo] = useState("");
const [loading, setLoading] = useState(false);
const preload = async () => {
setLoading(true);
try {
const res = await axios.get("/stages");
setState(res.data);
console.log(state, "STATE")
console.log(res.data,"DATA")
setLoading(false);
} catch (error) {
alert("Couldn't find any Todos! ");
setLoading(false);
}
};
console.log(state, "STATE")
const lists = () => (
<div className="row">
<div className="col-sm-12 col-md-4 offset-md-2 col-lg-4 offset-lg-2 border border-danger p-4">
<h3 className="text-center mb-4">Draggable List</h3>
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable droppableId="todos">
{(provided) => (
<ul
className="list-group"
{...provided.droppableProps}
ref={provided.innerRef}
>
{state.stage.map((item, index) => (
<Draggable
key={item._id}
draggableId={item._id + ""}
index={index}
>
{console.log(item._id, "KEY")}
{(provided) => (
<li
className="list-group-item d-flex justify-content-between align-items-start align-items-center"
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<div className="ms-2 me-auto">
<span className="ml-3 mr-2">
<input
type="checkbox"
className="form-check-input"
id={index}
value={index}
checked={item.selected}
onChange={(e) => {
const target = e.target.value;
const val = state[target].selected;
// console.log(val);
let tmp = Array.from(state);
tmp[target].selected = !val;
// console.log(tmp[target]);
setState(tmp);
// console.log(state);
}}
/>
</span>
<span className="font-weight-bold">{item.title}</span>
</div>
<span>
{/* <i className="bi bi-trash text-danger" /> */}
<button
className="btn btn-sm"
onClick={(e) => {
e.preventDefault();
handleDelete(item._id, index);
}}
>
<i className="bi bi-trash text-danger" />
</button>
</span>
</li>
)}
</Draggable>
))}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
</div>
<div
className="col-sm-12 col-md-4 col-lg-4 border border-info p-4"
style={{ marginLeft: "10px" }}
>
<h3 className="text-center mb-4">NON-Draggable List</h3>
<ul className="list-group">
{state.map(
(item, index) =>
item.selected && (
<li className="list-group-item" key={index}>
{item.title}
</li>
)
)}
</ul>
</div>
</div>
);
const handleDragEnd = (result) => {
// console.log(result);
if (!result.destination) return;
const items = Array.from(state);
const [recordedItem] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, recordedItem);
setState(items);
// console.log(state);
};
const handleDelete = async (id, index) => {
try {
await axios.delete(`/api/todo/${id}`);
// preload();
const temp = Array.from(state);
temp.splice(index, 1);
setState(temp);
} catch (error) {
if (`Error! ${error.response.data.err}`) {
alert(error.response.data.err);
} else {
alert(`Error ${error.response.status}: ${error.response.statusText}`);
}
}
};
const addNewTodoForm = () => (
<div className="row">
<div className="col-md-8 offset-md-2 mb-4 form-group">
<label htmlFor="newtodo">Add a New Todo Item</label>
<input
type="text"
className="form-control"
name="newtodo"
id="newtodo"
value={todo}
placeholder="Add New Todo"
required
onChange={handleChange}
/>
<button
className="btn btn-block btn-outline-primary mt-2"
onClick={handleSubmit}
>
Submit
</button>
</div>
</div>
);
const handleChange = (e) => {
e.preventDefault();
setTodo(e.target.value);
};
const handleSubmit = async (e) => {
e.preventDefault();
if (todo === "" || todo === null) {
alert(
"To add a New Todo item, please fill out the 'Add New Todo' field."
);
return;
}
const temp = {
title: todo,
};
try {
const res = await axios.post("/api/todo", temp);
setTodo("");
const tmp = Array.from(state);
tmp.push(res.data);
setState(tmp);
// preload();
} catch (error) {
if (error.response.data && error.response.data.err) {
alert(`Error! ${error.response.data.err}`);
} else {
console.log(error);
alert(`Error ${error.response.status}: ${error.response.statusText}`);
}
}
};
return (
<>
<div className="container">
<h1 className="text-center m-4 font-weight-bold text-uppercase">
DRAG TO DO{" "}
<span className="text-lowercase font-weight-normal">V1.0.1</span>
</h1>
{/* {addNewTodoForm()}*/}
{lists() }
</div>
</>
);
};
export default ProjectsDashboard;

Try this
{state.stage && state.stage.map(.........

This is because upon first render, state is initialized as an empty array. You could either initialize state as:
const [state, setState] = useState({ stage: [] });
Or write a conditional check before calling lists()
{state && state.stage ? lists() : null}

Ant Design modal appears few times in react js

Ant modal appears few times, but if i remove map function inside the modal then its works fine its appears only one time.
what may be the issue? please help me to solve this issue (Modal triggering/appears few times)
Ant modal code follows:
const [visibleVoucherModal, setVisibleVoucherModal] = useState(false);
const showVoucherModal = () => {
setVisibleVoucherModal(true)
}
const closeVoucherModal = () => {
setVisibleVoucherModal(false);
};
const SavedVoucherModal = () => {
return (
<Modal title="Select Any Voucher" visible={visibleVoucherModal} onCancel={closeVoucherModal} footer={null} >
{savedVoucherList.length >= 1 ?
<div>
<Checkbox.Group className="w-100" onChange={checkBox} value={voucherVal} >
{savedVoucherList.map((item, i) => {
return (
<div key={i}>
<Checkbox value={item.Id} className="w-100" onChange={e => { handleCheckBox(e, i) }}
checked={checked[i] || true} disabled={!checked[i] && disabled} >
<div className="pl-4">
<List.Item style={{ marginTop: "-35px" }} className="py-0">
<List.Item.Meta
// avatar={<img src={item.Photo == '' ? 'd' : item.Photo} alt="" width="72" />}
title={<span style={{ fontSize: "12px" }}>{item.Name}</span>}
description={<div className="small">Expiry Date: <br />{item.ExpireDate.slice(0, 10)}</div>}
/>
<div className="pt-1">
<p className="font-weight-bold text-primary mb-0">{numberFormat(item.Price)}</p>
<small><del>{numberFormat(item.OldPrice)}</del></small>
</div>
</List.Item>
</div>
</Checkbox>
<Divider className="m-0 p-0 mb-4" />
</div>)
})}
</Checkbox.Group>
</div> :
<p className="mb-4">Oops, there is no voucher applicable to this order</p>
}
<Button type="primary" className="font-weight-bold btn-round" onClick={closeVoucherModal}>Close</Button>
</Modal>
)
}
Button:
<Button type="default" className="text-primary border-right-0 border-left-0" size="large" onClick={showVoucherModal}>Redeem Voucher</Button>

Next js - Setting DOM element scrollHeight in parent component from child component

I have created an accordion within an accordion
/pages/profile.js passes all the data the first component /components/loved_one.js which renders the first DOM container. When the container button is clicked, the toggleAccordion function sets the scrollheight of the ref content (the container of the accordion within). Which works great as none of the elements within are expanded, and so the height is calculated.
The accordion within /components/event.js does the same thing. However this now expands and the parent accordion container above is now too small.
If I collapse and expand the parent accordion, it works, as the inner elements are expanded and so can set the correct height again.
So I'm trying to find a way, when I set the height of the inner accordion container, I also trigger the parent accordion container to re-address it's height.
Anyone know how I could do this? Appreciate any help.
Here's the code: -
/pages/profile.js
export const Profile = ({ loved_ones, events, messages, mementos }) => {
const [session, loading] = useSession();
if (loading) return <div>loading...</div>;
if (!session) return <div>no session</div>;
return (
<Layout>
{session && (
<>
<h1>{session.user.name}</h1>
</>
)}
{loved_ones.map((loved_one, index) => (
<LovedOne
key={index}
id={loved_one.id}
firstname={loved_one.firstname}
surname={loved_one.surname}
email={loved_one.email}
events={events}
messages={messages}
mementos={mementos}
/>
))}
<style jsx>{`
.avatar {
width: 220px;
border-radius: 10px;
}
`}</style>
</Layout>
);
};
export async function getServerSideProps(req, res) {
const session = await getSession(req);
const prisma = new PrismaClient({
log: ["query", "info", "warn"],
});
if (!session) {
return {
props: {},
redirect: {
destination: "/login",
permanent: false,
},
};
}
const loved_one = await prisma.loved_one.findMany({
where: {
user_id: session.user.user_id,
},
});
const events = await prisma.events.findMany({
where: {
user_id: session.user.user_id,
},
});
const messages = await prisma.messages.findMany({
where: {
user_id: session.user.user_id,
},
});
const mementos = await prisma.mementos.findMany({
where: {
user_id: session.user.user_id,
},
include: {
package_size: true,
},
});
const stringifiedData = JSON.stringify(loved_one);
const loved_ones_data = JSON.parse(stringifiedData);
const stringifiedDataEvents = safeJsonStringify(events);
const events_data = JSON.parse(stringifiedDataEvents);
const stringifiedDataMessages = safeJsonStringify(messages);
const messages_data = JSON.parse(stringifiedDataMessages);
const stringifiedDataMementos = safeJsonStringify(mementos);
const mementos_data = JSON.parse(stringifiedDataMementos);
return {
props: {
loved_ones: loved_ones_data,
events: events_data,
messages: messages_data,
mementos: mementos_data,
},
};
}
export default Profile;
/components/loved_one.js
export const LovedOne = (props) => {
const [setActive, setActiveState] = useState("");
const [setHeight, setHeightState] = useState("0px");
const [setIcon, setIconState] = useState("fas fa-plus");
const content = useRef();
function toggleAccordion() {
setActiveState(setActive === "" ? "active" : "");
setHeightState(
setActive === "active" ? "0px" : `${content.current.scrollHeight}px`
);
setIconState(setActive === "active" ? "fas fa-plus" : "fas fa-minus");
}
return (
<>
<div className="item-container teal lighten-5">
<div className="row item teal darken-1">
<div className="col m1">
<button className={`expand ${setActive}`} onClick={toggleAccordion}>
<i className={`${setIcon} white-text small`}></i>
</button>
</div>
<div className="col m4 item-title">
<span className="teal-text text-darken-4">Loved One: </span>
{props.firstname} {props.surname}
</div>
<div className="col m5 item-title">
<span className="teal-text text-darken-4">Email: </span>
{props.email}
</div>
<div className="col m1 offset-m1">
<button className="btn-floating btn-small waves-effect waves-light">
<i className="fas fa-trash-alt white-text small"></i>
</button>
</div>
</div>
<div
className="item-content"
ref={content}
style={{ maxHeight: `${setHeight}` }}
>
{props.events.map((loved_one_event, index) => {
if (props.id === loved_one_event.loved_one_id)
return (
<Event
key={index}
id={loved_one_event.id}
loved_one_id={loved_one_event.loved_one_id}
date={loved_one_event.date}
anniversary={loved_one_event.anniversary}
messages={[props.messages]}
mementos={props.mementos}
/>
);
})}
</div>
</div>
</>
);
};
export default LovedOne;
/components/events.js
export const Event = (props) => {
const [setActive, setActiveState] = useState("");
const [setHeight, setHeightState] = useState("0px");
const [setIcon, setIconState] = useState("fas fa-plus");
const content = useRef();
const [startDate, setStartDate] = useState(new Date());
function toggleAccordion() {
setActiveState(setActive === "" ? "active" : "");
setHeightState(
setActive === "active" ? "0px" : `${content.current.scrollHeight}px`
);
setIconState(setActive === "active" ? "fas fa-plus" : "fas fa-minus");
}
return (
<>
<div className="item-container teal lighten-4">
<div className="row event teal lighten-1">
<div className="col m1">
<button className={`expand ${setActive}`} onClick={toggleAccordion}>
<i className={`${setIcon} white-text small`}></i>
</button>
</div>
<div className="col m4 item-title">
<span className="teal-text text-darken-4">Event Date: </span>
</div>
<div className="col m3 item-title">
<span className="teal-text text-darken-4">Anniversary: </span>
{props.anniversary}
</div>
<div className="col m1 offset-m2">
<button className="btn-floating btn-small waves-effect waves-light">
<i className="fas fa-trash-alt white-text small"></i>
</button>
</div>
</div>
<div
className="event-content"
ref={content}
style={{ maxHeight: `${setHeight}` }}
>
{props.messages[0].map((message, index) => {
if (props.id === message.event_id)
return (
<Message
key={index}
id={message.id}
event_id={message.event_id}
content={message.content}
/>
);
})}
</div>
<div
className="event-content"
ref={content}
style={{ maxHeight: `${setHeight}` }}
>
{props.mementos.map((memento, index) => {
if (props.id === memento.event_id)
return (
<Memento
key={index}
id={memento.id}
event_id={memento.event_id}
package_size={memento.package_size}
/>
);
})}
</div>
</div>
</>
);
};
export default Event;

Found what to do. I needed to set the height to auto, rather than the maxHeight
.item-content {
overflow: hidden;
height: 0px;
transition: max-height 0.2s ease-out;
}
function toggleAccordion() {
setActiveState(setActive === "" ? "active" : "");
setHeightState(setActive === "active" ? "0px" : `auto`);
setIconState(setActive === "active" ? "fas fa-plus" : "fas fa-minus");
}
return (
<>
<div className="item-container teal lighten-5">
<div className="row item teal darken-1">
<div className="col m1">
<button className={`expand ${setActive}`} onClick={toggleAccordion}>
<i className={`${setIcon} white-text small`}></i>
</button>
</div>
<div className="col m4 item-title">
<span className="teal-text text-darken-4">Loved One: </span>
{props.firstname} {props.surname}
</div>
<div className="col m5 item-title">
<span className="teal-text text-darken-4">Email: </span>
{props.email}
</div>
<div className="col m1 offset-m1">
<button className="btn-floating btn-small waves-effect waves-light">
<i className="fas fa-trash-alt white-text small"></i>
</button>
</div>
</div>
<div
className="item-content"
ref={content}
style={{ height: `${setHeight}` }}
>

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

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 <tbody>.
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 (
<>
<Search />
<Segment inverted color="blue">
<Header inverted color="grey" size="medium">
My Favorites
</Header>
</Segment>
<Segment>Count: {props.cardsToShow.length}</Segment>
<Responsive maxWidth={767}>
<strong>Click to Sort:</strong>
</Responsive>
<Table sortable celled fixed striped>
<Table.Header>
<Table.Row>
<Table.HeaderCell
textAlign="center"
sorted={column === "title" ? direction : null}
onClick={() => handleSort("title")}
>
Card Title
</Table.HeaderCell>
<Table.HeaderCell
width={2}
textAlign="center"
sorted={column === "updatedBids" ? direction : null}
onClick={() => handleSort("updatedBids")}
>
# Bids
</Table.HeaderCell>
<Table.HeaderCell
textAlign="center"
sorted={column === "updatedPrice" ? direction : null}
onClick={() => handleSort("updatedPrice")}
>
Price
</Table.HeaderCell>
<Table.HeaderCell
textAlign="center"
sorted={column === "timeStamp" ? direction : null}
onClick={() => handleSort("timeStamp")}
>
Time Left
</Table.HeaderCell>
<Table.HeaderCell
textAlign="center"
sorted={column === "status" ? direction : null}
onClick={() => handleSort("status")}
>
Status
</Table.HeaderCell>
<Table.HeaderCell textAlign="center" width={2}>
Remove
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{!filteredData
? "Sorry No Cards Found"
: filteredData.map(card => (
<>
<Responsive maxWidth={767}>
<div className="ui piled compact segment">
<div className="ui card">
<div className="blurring dimmable image">
<div className="ui inverted dimmer">
<div className="content">
<div className="center">
<div className="ui red button view">
VIEW
</div>
</div>
</div>
</div>
<Image
src={card.image}
href={card.itemURL}
centered
style={{ padding: "5px" }}
/>
</div>
<div className="content">
<div
id="rate"
className="ui star rating right floated"
data-rating="3"
></div>
<div className="header">
<a href={card.itemURL}>{card.title}</a>
</div>
<div
className="meta"
style={{ padding: "5px 0 0 0" }}
>
<span className="date">
<i className="clock icon"></i> Ends in{" "}
{moment
.duration(card.timeLeft, "minutes")
.humanize()}
</span>
<div style={{ padding: "10px 0 0 0" }}>
<span>
<Button color="green">
${card.updatedPrice}
</Button>
</span>
<span class="right floated date">
{" "}
<Button
onClick={() => removeFavorite(card)}
color="red"
icon="remove circle"
/>
</span>
</div>
</div>
</div>
<div className="extra content">
<div
className="ui right labeled button"
data-content="Bids"
data-variation="tiny"
tabindex="0"
>
<div className="ui blue icon tiny button">
<i className="gavel large icon"></i>
</div>
<a
href={card.itemURL}
className="ui basic blue left pointing label"
>
{card.updatedBids}
</a>
</div>
<div
className="ui left labeled right floated button"
data-content="Watch Count"
data-variation="tiny"
tabindex="0"
>
<a
href={card.itemURL}
className="ui basic blue right pointing label"
>
{card.status}
</a>
<div className="ui blue icon tiny button">
<i className="history large icon"></i>
</div>
</div>
</div>
</div>
</div>
</Responsive>
<Responsive
as={"tr"}
minWidth={768}
style={{ width: "100%" }}
>
<Popup
trigger={
<Table.Cell>
<a href={card.itemURL} target={"_blank"}>
{card.title}
</a>
</Table.Cell>
}
content={
<img
alt={card.title}
src={card.image}
height="250"
></img>
}
style={style}
size="small"
position="left center"
></Popup>
<Table.Cell textAlign="center">
{card.updatedBids}
</Table.Cell>
<Table.Cell textAlign="center">
${card.updatedPrice}
</Table.Cell>
<Table.Cell textAlign="center">
{moment.duration(card.timeLeft, "minutes").humanize()}
</Table.Cell>
<Table.Cell textAlign="center">{card.status}</Table.Cell>
<Table.Cell textAlign="center">
<Button
onClick={() => removeFavorite(card)}
color="red"
icon="remove circle"
/>
</Table.Cell>
</Responsive>
</>
))}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan="6"></Table.HeaderCell>
</Table.Row>
</Table.Footer>
</Table>
</>
);
};
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?

If !filteredData === false then the only child of <Table.Body> is text.
As the error says, the table body cannot have text as a child.
Wrap the text like this <Table.Row><Table.Cell>Sorry no cards shown</Table.Cell></Table.Row>