In my div, I have a function which renders components based on what is present in an object. However, even though cat.comp returns the actual functional component, it does not get rendered.
This is my render function:
{cardsInGrid.map((card) => {
sideBarCategories.map((cat) => {
if (card.id === cat.id) {
const Component = cat.comp;
return <Component key={card.id} />;
}
});
})}
Nothing is being returned from the first map. You need to return the array of elements:
{cardsInGrid.map((card) => {
return sideBarCategories.map((cat) => {
if (card.id === cat.id) {
const Component = cat.comp;
return <Component key={card.id} />;
}
});
})}
However, this is going to result in a two-dimensional array so you'll need to flatten that. One approach would be to move this out of the component tree and create a one-dimensional array. For example, something along the lines of:
const elements = [];
cardsInGrid.forEach(card => {
sideBarCategories.forEach(cat => {
const Component = cat.comp;
elements.push(<Component key={card.id + cat.id} />);
});
});
return <>{elements}</>;
After further discussion, it sounds like you only ever have one component and you want to find that specific category and render it. In that case, I would suggest using find (or equivalent logic). For example:
{cardsInGrid.map(card => {
const Component = sideBarCategories.find(cat => cat.id === card.id).comp;
return <Component key={card.id} />;
})}
cardsInGrid array and find the corresponding component which is listed with that same id in sideBarCategories. What would be the most efficient way of doing that?
find. Is this the problem you're trying to solve?You are missing the return in your first map method. You should add it:
{
cardsInGrid.map((card) => {
return sideBarCategories.map((cat) => {
if (card.id === cat.id) {
const Component = cat.comp;
return <Component key={card.id} />;
}
});
});
}
or you can use implicit return:
{
cardsInGrid.map((card) =>
sideBarCategories.map((cat) => {
if (card.id === cat.id) {
const Component = cat.comp;
return <Component key={card.id} />;
}
})
);
}