Proof of existence tutorial front end template file upload section not appearing

Steps

• Follow the tutorial https://substrate.dev/docs/en/tutorials/build-a-dapp/front-end
• Proof of existence file upload section not appearing after modifying TemplateModule.js as mentioned in the tutorial

[MehranMazhar]

@jimmychu0807 thanks

[omadoyeabraham]

@MehranMazhar I had the same issue you highlighted above, here’s how I fixed it:

1. The “api” should be gotten from the “useSubstrateState()” hook instead of the “useSubstrate()” hook. The tutorial has most likely not been updated to reflect changes to the substrate front-end template.

i.e change

const { api } = useSubstrate()

to

const { api } = useSubstrateState()

at the beginning on the Main and TemplateModule functions in the file.

1. Update the return statement from the TemplateModule function to

 return api.query && api.query.templateModule && api.query.templateModule.proofs ? (
    <Main {...props} />
  ) : null

i.e. add api.query && ........ to handle the initial load when api is undefined.