0

I am building an app in this after selecting the specific NFT a new div with extra content will show up. The selecting part is working fine but now I want it to be able to deselect it. This is the state

const [selectedNFT, setSelectedNFT] = useState<NFT>();

and this is the function for selecting the NFT

{ownedNfts?.data?.map((nft) => (
        <div
          onClick={() => setSelectedNFT(nft)}
          className={`flex flex-col space-y-2 card min-w-fit border-2 bg-gray-100 
          ${
            nft.metadata.id === selectedNFT?.metadata?.id
              ? "border-black scale-105 z-50"
              : "border-transparent"
          }`}
          key={nft.metadata.id}
        >

the onClick events populate the state but what I want is that after clicking on it again it should remove the data from the state making the state empty again

  • What do you want to do? remove deselceted value from state, update the dom with new values, can you more specific and share more code? – Mohammed Shahed Nov 04 '22 at 10:04
  • the selectedNFT state is populated with the nft I selected but now I want to deselect it by clicking on It again. what code do you require I mean the code related to this, is this part that I shared –  Nov 04 '22 at 10:12
  • You need to post more of your code. – possum Nov 04 '22 at 10:14
  • Okay, I have updated it. –  Nov 04 '22 at 10:18

1 Answers1

0

you can check if the nft is the current state, if so set it empty or whatever the desired value else set it to state .. (assuming you are putting only one nft in to selectedNFT)

onClick={() => {
   selectedNFT === nft ? setSelectedNFT("") : setSelectedNFT(nft)
}
KcH
  • 3,302
  • 3
  • 21
  • 46