SolidJSS
SolidJS•2y ago•
21 replies
Xzayler

Dynamically rendering components

My objective in a nutshell is making a small user card appear on an element hover, like on twitter. The way I'm making it is the following:

This is a barebones representation
// UserPopup.tsx
export default function UserPopup(props: { userHandle: string }) {
  const [user] = createResource(() => {
    return getUserSummary(props.userHandle);
  });
  // addFollow is a server function doing db stuff
  const follow = useAction(action(addFollow));

  return (
    <Show when={user()} fallback={<div>Loading...</div>}>
      <div>user()!.name</div>
      <button onClick={() => follow(user()!.id)}>
    </Show>
  )}
And then I have a wrapper for this popup 
// UserWrapper.tsx

export default function UserWrapper(props) {
  const [element, setElement] = createSignal<JSX.Element>(null);

  const activate = (handle: string) => {
    setElement(() => UserPopup({ userHandle: handle }));
  };

  const deactivate = () => {
    setElement(null);
  };
  
  return (
    // Additional stuff calling activate onMouseEnter and deactivate onMouseLeave
    <div>{element()}</div>
  )}
With this method I get the error: 'use' router primitives can be only used inside a Route. which I guess is because I'm trying to create UserPopup just in the air without a parent, but I'm not sure how I should be creating UserPopup within a context, or do I just have to not use useAction and find something else? The other problem with this is I'm getting the warnings computations created outside a createRoot or render will never be disposed. So I tried using both render and mount and attach the UserPopup element I create directly to the element I want it to go in but nothing happened, this was my attempt:
// UserWrapper
let tooltipbox;

const activate = (handle: string) => {
  const dispose = render(
    () => <UserPopup userHandle={props.handle}>,
      tooltipbox! as HTMLDivElement
  );
};
...
...
return <div ref={tooltipbox}></div>

So what is the right way to do this?
Was this page helpful?