SolidJSS
SolidJS•3y ago•
33 replies
Kasper

Component is not updated when prop is changed

I have a component "ShowDocument" with a resource inside, the component has a variables that needs to used in the resources. The component is called with the following: <ShowDocument documentId={showDoc()} onClose={closePanel} /> my issues is that when signal showDoc() in the prop "documentId" is updated the component ShowDocument is not updated, and will continue to show what was there when it was first rendered.
const ShowDocument = (props: { documentId: string | undefined; onClose: () => void }) => {
  console.log("ShowDocument: ", props.documentId);
  const { getSecureDocumentLink } = useDocuments();

  const [documentLink] = createResource(props.documentId, async (documentId) => {
    console.log("Fetching new document link: ", documentId);
    if (!documentId) {
      return undefined;
    }
    console.log("Getting secure link for document: ", documentId);
    let link = await getSecureDocumentLink(documentId, false);
    console.log("Got secure link: ", link);
    return link;
  });

  return (
    <div class="flex flex-col h-full w-full">
      <div>
        <button onClick={props.onClose} class="bg-blue-500 rounded font-bold  p-2 border-solid border-2 border-blue-600 hover:bg-blue-600">
          Close
        </button>
      </div>
      <div class="flex-1">
        <Show when={documentLink() && !documentLink.loading} fallback={<span>Loading...</span>}>
          <iframe src={documentLink()} class=" h-full w-full"></iframe>
        </Show>
      </div>
    </div>
  );
};
Was this page helpful?