Lesson 15: Unable to create an UI similar to Patrick's trailer about the NFT Marketplace

[ghost]

I'm currently finish Lesson 15 and successfully build the UI for my NFT Marketplace, using The Graph solely. But when I rewatch Patrick's trailer about the NFT Marketplace at the beginning of Lesson 15 (23:40:20), I found that the UpdateListingModal in the video is different from mine. Then I came to https://github.com/PatrickAlphaC/nextjs-nft-marketplace-moralis-fcc and I found that there was an update with the file named UpdateListingModal.tsx, I added it to my code and made some changes according to the repo, but at the end I still can not get the UI similar to the video.

This is the difference:

• Patrick's UI:

• My UI:

Here's my repo:

• Contracts: https://github.com/veoquynhs/hardhat-nft-marketplace-fcc
• Front-end: https://github.com/veoquynhs/nextjs-nft-marketplace-fcc
• The Graph: https://github.com/veoquynhs/graph-nft-marketplace-fcc

[alfaqi]

Challenge yourself, you can do it.

[alfaqi]

Actually, I didn't mixed up javascript and typescript together in one project before.

[ghost]

I think that's not the problem. Even though I've got 2 files named UpdateListingModal.js and UpdateListingModal.tsx, when I change the name of UpdateListingModal.js to another one, maybe UpdateListingModal1.js for example, the terminal shows an error in NFTBox.js, indicates that it didn't find the UpdateListingModal.js.

[alfaqi]

I think the issue is you are not exporting the UpdateListingModal.js file
try to add export default to function declaration, like this export default function UpdateListingModal

[ghost]

No, like I said, the UpdateListingModal.js file is the old modal. I'm trying to import the new one, which is in the UpdateListingModal.tsx file, which is similar to Patrick's UI at 23:40:20.

[alfaqi]

I'm sorry I didn't understand you.
You have to change typescript to javascript,
Let me check this.

[alfaqi]

We will change Typescript to Javascript
first instead of this

export interface UpdateListingModalProps {
    isVisible: boolean
    onClose: () => void
    nftMarketplaceAbi: object
    marketplaceAddress: string
    nftAddress: string
    tokenId: string
    imageURI: string | undefined
    currentPrice: number | undefined
}

const UpdateListingModal = ({
    isVisible,
    onClose,
    nftMarketplaceAbi,
    marketplaceAddress,
    nftAddress,
    tokenId,
    imageURI,
    currentPrice,
}: UpdateListingModalProps) => {

change to this

function UpdateListingModal({
    isVisible,
    onClose,
    nftMarketplaceAbi,
    marketplaceAddress,
    nftAddress,
    tokenId,
    imageURI,
    currentPrice,
}) {

and change this

    const [priceToUpdateListingWith, setPriceToUpdateListingWith] = useState<string | undefined>()

to this

    const [priceToUpdateListingWith, setPriceToUpdateListingWith] = useState("")

and rename UpdateListingModal.tsx to UpdateListingModal.js or UpdateListingModal.jsx

[ghost]

I've changed and updated to my repo, but I got this error on my UI

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[ghost]

Do I need to delete or do something else with my UpdateListingModal.js, which is the old modal? Cause I still see the fact that when I change the name of UpdateListingModal.js, the terminal still shows an error in NFTBox.js, indicates that it didn't find the UpdateListingModal.js.

[alfaqi]

re-write this line

import UpdateListingModal from "./UpdateListingModal"

or just add the extension to filename

import UpdateListingModal from "./UpdateListingModal.jsx"

because the project is mapping to old file, so you need to re-mapping to new file

[ghost]

Thank you so much!