menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team

Render Component after getData

August 23, 2021 at 8:08am

Render Component after getData

August 23, 2021 at 8:08am
I am searching for a solution to render my component after my data is fetched. The Problem with useEffect ist that it renders after the initital render. That creates two empty object in my DOM. That is quite the problem, since I want to style these. Funny enough conditional rendering didn't really help. That's also something I didn't understand. I added if(menus.length >= 1) { return... before the second return statement. Doing this resolved in the same problem, that I got two empty articles for each Fragment....So I thought I need to render after getData(), but how would I do this?
function Speisekarte() {
const [menus, setMenus] = useState([]);
const [loading, setLoading ] = useState(false);
function getData() {
const q = query(collection(db, "meals"), orderBy('id', 'asc'));
const unsubscribe = onSnapshot(q, (querySnapshot) => {
const items = [];
querySnapshot.forEach((doc) => {
items.push(doc.data());
})
setMenus(items);
})
setLoading(false);
};
useEffect(() => {
getData();
}, []);
return (
<section className="menu">
<div className="menu__container">
<h1 className="menu__container__title">Menu</h1>
{menus.map((item) => {
const keys = Object.keys(item);
return (
<Fragment key={item.title}>
<h2>{item.title}</h2>
<div className="menu__container__item">
{keys.map((gericht) => (
<article className="menu__container__item-article" key={item[gericht].id}>
<div className="menu__container__item-article__row">
<h3 className="menu__container__item-article__title">{item[gericht].title}</h3>
<span className="menu__container__item-article__price">{item[gericht].price}</span>
</div>
<p className="menu__container__item-article__info">
{item[gericht].desc}
</p>
</article>
))}
</div>
</Fragment>
)
})}
</div>
</section>
)
}
export default Speisekarte
No messages yet