Hello. I have a component which displays the CHILDREN that were inserted into it. The children have ID’s that I assign through the Plasmic visual editor. I try to display only one child at a time (the one whose ID meets a certain criterium). What I do in the code is create a filtering function:
const filterChildren = () => {
return children.filter(child => {
return child.props.id === targetId;
});
};
This function works well when inspecting a localhost website. However, in the Plasmic editor, the filtered children are not shown. I don’t know if there is an easy fix to that, or maybe a different approach?
is the children you’re filtering props.children? If so you should try using a package like react-keyed-flatten-children to convert it to an array; the children we pass in in the artboard may be wrapped in a fragment but react-keyed-flatten-children will be able to deeply flatten the children prop
Yes, it is props.children . Unfortunately the solution didn’t help. I see the filtered children in the browser on localhost but not in Plasmic. Does it have anything to do with the fact that I assign the the Plasmic’s component settings → HTMLAttribute ?
could you try logging props.children and see what you get when using the component inside Plasmic?