SolidJS•2y ago•

21 replies

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>
  )}

// 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>
  )}

// 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.

'use' router primitives can be only used inside a Route.

which I guess is because I'm trying to create

UserPopup

UserPopup

just in the air without a parent, but I'm not sure how I should be creating

UserPopup

UserPopup

within a context, or do I just have to not use

useAction

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

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>

// 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?

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>
  )}

// 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>
  )}

// 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.

'use' router primitives can be only used inside a Route.

which I guess is because I'm trying to create

UserPopup

UserPopup

just in the air without a parent, but I'm not sure how I should be creating

UserPopup

UserPopup

within a context, or do I just have to not use

useAction

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

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>

// 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?

Dynamically rendering components

Dynamically rendering components

Similar Threads

Similar Threads

Similar Threads