React render Link or?

Question

React

There are 3 tabs in the React application, tab 1, tab 2, tab 3. What is the catch, there is a code, a little unified for example

const links = {
  [
    {name: '1', url: 'some url1'},
    {name: '2', url: 'some url2'},
    {name: '3', url: 'some url3'},
  ],
};

links.map(({name, url}) => {
  return (
    <Link
        key={name}
        to={url}
    >
        <span>{name}</span>
    </Link>
  );
})

I need to remake it so that at the output I have this kind, if I am (clicked) either on the tab / link "1" or "3", then I will get this:

<Link to="some url1">1</Link>
<a href="some url2">2</Link>
<Link to="some url3">3</Link>

and if I click on taboo/link "2", then:

<a href="some url1">1</Link>
<Link to="some url2">2</Link>
<a href="some url3">3</Link>

help me to make the logic correctly, my not great knowledge, alas, is not enough yet

Answer 1

Change a to Link? I would make a boolean value in links for each object, which would switch. And on the link itself, or on the wrapper click handler.