# Selecting an NFT

The `globals.css` import will be done in `App.js`, the rest of the code from this page will be inserted on the `MainMenu.js` page.

Making it possible for the user to click any of the NFTs means we have to import some styles for the selected NFT’s appearance. Please copy `globals.css` file into the styles directory. After this, import it into the main `App.js` file.

```jsx
import './styles/globals.css';
```

### Update styles for rendered NFTs

After this, please add `classNames` to the `<span>` and `<img>` tags containing the NFT info. The result should be the following:

```jsx
{NFTsOwned.map((nftId) => (
  <span id={`nft${nftId}`} key={nftId} className="characterContainer">
    <img
      className="characterImg"
      src={`https://stacksgamefi.mypinata.cloud/ipfs/QmNz74TN66hgi9X4wZ1ch9hXKxaywG5soEQPMfDqEMLVsd/${nftId}.png`}
      alt={`character ${nftId}`}
    ></img>
    {`NFT#${nftId}`}
  </span>
))}
```

In order to memorize the user’s selected NFT, we will need a `state` to keep track of it, initialized by `''` value inside `MainMenu`. The initial value on the `MainMenu` component’s load means the user has not selected any NFT.

```jsx
const [selectedNFT, setSelectedNFT] = useState('');
```

### Change styles based on selected NFT

We want the selection to stand out the other NFTs. For this, we will create a `changeSelection` constant which will take two parameters: the previous selected NFT and the currently selected one:

```jsx
const changeSelection = (nft, localSelectedNFT) => {
  document.getElementById(`nft${localSelectedNFT}`)?.classList.remove('card-selected');
  document.getElementById(`nft${nft}`)?.classList.add('card-selected');
};
```

This `constant` will make sure that the new clicked NFT will be highlighted, and the previous one not anymore. Next we will need an event handler, for handling the user’s clicks inside the NFTs interface. This handler first calls the `changeSelection`, making the CSS changes needed for the UI appearance. Let’s make an `alert()` to see if the clicked NFT’s id is the same to the one the constant uses as a `parameter`. Least but not last, we have to set the `selectedNFT`'s constant value to the `id` received as a `parameter`.

```jsx
const handleClickNFT = (id) => {
  changeSelection(id, selectedNFT);
  alert(`selected NFT:  ${id}`);
  setSelectedNFT(id);
};
```

Now that we have created the handler, let’s stick it to the corresponding `HTML` tag’s `onClick` function (line 7):

{% code lineNumbers="true" %}

```jsx
{NFTsOwned.map((nftId) => (
  <span id={`nft${nftId}`} key={nftId} className="characterContainer">
    <img
      className="characterImg"
      src={`https://stacksgamefi.mypinata.cloud/ipfs/QmNz74TN66hgi9X4wZ1ch9hXKxaywG5soEQPMfDqEMLVsd/${nftId}.png`}
      alt={`duck ${nftId}`}
      width="50"
      onClick={() => handleClickNFT(nftId)}
    ></img>
    {`NFT#${nftId}`}
  </span>
))}
```

{% endcode %}

## This is the branch with the changes done:

{% embed url="<https://github.com/BowTiedDeployer/workshop-nft-integration/tree/dapp/4-select-nft>" %}
branch dapp/4-select-nft
{% endembed %}

You can check the exact changes in this commit referring to them

{% embed url="<https://github.com/BowTiedDeployer/workshop-nft-integration/commit/fd2b56e7e6119882bfe8475a17f9b5cd0a6ceb42>" %}
commit fd2b56e7e6119882bfe8475a17f9b5cd0a6ceb42
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.degenlab.io/gamefistacks/workshop/nft-web-app-integration/selecting-an-nft.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.