I don't understand how to pass a link to render in antd

Question

this is my first time posting to stackOverflow. I'm trying AntDesign, and got a problem. Help me figure out how to pass a link from the data to the render.

one item from data example:

{
    name: "Aburame Clan",
    number: "01",
    description:
      "This clan from Konoha Village is known for its ties to insect. At birth clan members form an agreement           with bugs to inhabit and feed on the chakra their body creates. In return the bugs will serve the commands of the clan member.",
    image: "https://narutoql.s3.amazonaws.com/Aburame.jpg",
    village: "Leaf village",
    link: "https://naruto.fandom.com/wiki/Aburame_Clan?so=search",
  }

my column with render:

const columns = [
  {
    title: "Clan name",
    dataIndex: "name",
    key: "name",
    address: "link",
    render: (text, link) => (
      <>
        {text}
        <Button type="link" href={link} icon={<InfoCircleOutlined />}></Button>
      </>
    ),
  },

enter image description here

I have a data.js file that has an object with clans from naruto. In general, everything works perfectly for me, but I wanted to add a link to the wiki article next to each clan name, and added a link icon to each name using render in columns. But the problem is that I do not understand how I can connect the address itself there.

I just need you to help me figure out how to pass the link from my microdatabase to this render, thank you all in advance, love you all

Welcome to Stackoverflow! Please read [how to ask](https://stackoverflow.com/help/how-to-ask) and edit (don't comment with more details) your question to make it appropriate for Stackoverflow. Right now your question is not clear. What do you mean by "connect the address itself there."? Please be clear about what you're trying to do, and how what you're trying is not doing what you expect it to do. — Andy Ray, May 28 '23 at 00:10
are you using a Table from antD? why `columns` const? explain ur situation in more details cuz of right now its unclear what exactly you using — Lith, May 28 '23 at 03:40

score 0 · Answer 1 · answered May 30 '23 at 03:19

Hi could you try this way

interface IData {
 name: string;
 link: string;
}
const columns: ColumnsType<IData> = [
    {
      title: "Name Column",
      dataIndex: "name",
      key: "1",
      render: (record) => (
        <Link to={`${EXTERNAL_LINK_PATH}/${record?.link}`}>
          {record?.name}
        </Link>
      ),
    },
]

record is object of your array. hope that could help you

I don't understand how to pass a link to render in antd

1 Answers1