I'm using react-masonry-css to display cards themed with bootstrap.
Everything is nice and tidy when I add a test array such as :
const breakpointColumnsObj = {
default: 3,
1000: 2,
800: 1,
};
function MasonryShow(props) {
return (
<Masonry
breakpointCols={breakpointColumnsObj}
className="my-masonry-grid"
columnClassName="my-masonry-grid_column"
>
{[<MyCard />, <MyCard />, <MyCard />]}
</Masonry>
}
But when I load an imported component generated with useEffect() containing a card array (with async data), all of the cards are displayed on the same column.
import GeneratedCards from "../components/CardArray";
const breakpointColumnsObj = {
default: 3,
1000: 2,
800: 1,
};
function MasonryShow(props) {
return (
<Masonry
breakpointCols={breakpointColumnsObj}
className="my-masonry-grid"
columnClassName="my-masonry-grid_column"
>
{<GenerateCards/>}
</Masonry>
}
This is the generating code for the array:
function GenerateCards(props) {
function MyCard(cardData) {
return (
<div class="card d-block mx-auto mb-4 shadow-sm" style={{ width: "18rem" }}>
<img src="/assets/square.png" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">#Test</h5>
<div style={{ textAlign: "left" }}>
</div>
</div>
</div>
)
}
const items = []
for (const data in props.metadata) {
items.push(<MyCard metadata={data} />)
}
return (
<>
{items}
</>
)
}
I think it may be a rendery problem, but I can't really find a way to solve it.
Juan Pablo Isaza