Cannot run JSX when using <Address> or <Copyable>

[1337-ishaan]

I am refactoring my code to use JSX instead of functions.

`case "hello":
  return snap.request({
    method: "snap_dialog",
    params: {
      type: "confirmation",
      content: (
        <Box>
          <Text>Hello, <Bold>{origin}</Bold>!</Text>
          <Text>This custom confirmation is just for display purposes.</Text>
          <Text>But you can edit the Snap source code to make it do something, if you want to!</Text>
          <Address address='0x000000000000000000000000000000000000dEaD'>0x000000000000000000000000000000000000dEaD</Address>
          <Copyable value='0x000000000000000000000000000000000000dEaD'>0x000000000000000000000000000000000000dEaD</Copyable>
        </Box>
      ),
    },
  });`

This reverts with error

{ "code": -32602, "message": "Invalid params: At path: id — Expected a value of type string, but received: undefined." }

It works fine when I don't use Copyable and/or Address

[Montoya]

First make sure you are importing all the correct components:

import { Box, Text, Bold, Copyable, Address } from "@metamask/snaps-sdk/jsx";

Then, make sure to use the correct syntax:

<Copyable>0x000000000000000000000000000000000000dEaD</Copyable>
<Address>0x000000000000000000000000000000000000dEaD</Address>

Neither component has any parameters, just text inside.

[1337-ishaan]

I know, I removed it because they weren't working

[Montoya]

@ziad-saab can help you get them working again

[ziad-saab]

Hey @1337-ishaan Looking at the code you shared, I don't see any instances of Address nor Copyable, even commented out.

[ziad-saab]

@1337-ishaan Looking at the code above however, I see that you're adding children to Address and Copyable. Neither accepts children. The proper way to use them would be:

<Address address="0x...." />
<Copyable value="..." />