How can I convert an array of URLs to HTML links?

Question

I have NextJS app with an array of URLs that I want to convert to HTML links.

First, I tried the solution described here using the following code:


    var list = document.createElement('ul'); // Create the list element
    $("body").append(list)
    $('ul').attr("id", "ticketList");
    $.each(yvars, function(i, yvars) {
        $("#ticketList").append("<li><a href='https://jeng.internal.com/browse/"+arr+"'  id="+arr+"_link>"+arr+"</a></li>");
    })
    return (
        <>
            <h1>{yname}</h1>
            <h2>{ydesc}</h2>
            <div>{list}</div>
        </>
    )

...and got this error:

Then I tried this solution:


    for (let i = 0; i < yvars.length; i++) {
        result = result + " <a href='" + yvars[i] + "'>" + "Technique " + alf[i] + "</a><br>";
    }
    document.getElementById('results').innerHTML = result

    return (
        <>
            <h1>{yname}</h1>
            <h2>{ydesc}</h2>
            <div id='results'></div>
        </>
    )

...and got this error:

What is the preferred way of doing this?

Update: One approach that is close to a solution is this construct:

    for (let i = 0; i < yvars.length; i++) {
        result = result + " <a href='" + yvars[i] + "'>" + "Technique " + alf[i] + "</a><br>";
    }

    return (
        <>
            <h1>{yname}</h1>
            <h2>{ydesc}</h2>
            {result}
        </>
    )

It causes the web page to look like this (I've redacted the URLs):

your first error is in regards to jQuery. just need to define $. and second error is due to there being no id in the html for 'results'. check your html — Rick, May 01 '23 at 04:45
2nd error is that html needs to be ```div id="results"``` and not in curly braces. — Muhammad Waqar Anwar, May 01 '23 at 04:54
Thanks, @Rick. How do you define $.? That isn't in the original post here: https://stackoverflow.com/a/57981666/514708 (or at least it isn't obvious to me). — Tennis Smith, May 01 '23 at 05:04
I think you are returning after the ```document.getElementbyId``` which is why it cannot get ```results```. Somehow do one thing that make the html first and then do ```document.getElementbyId```. Because html is not made when you do ```document.getElementbyId```. — Muhammad Waqar Anwar, May 01 '23 at 05:05
Does this answer your question? [JQuery - $ is not defined](https://stackoverflow.com/questions/2194992/jquery-is-not-defined) — kmoser, May 01 '23 at 05:18

oluroyleseyler · Accepted Answer · 2023-05-01T05:29:45.320

1

Using map method and put all elements inside a link html tag

const linkElements = yvars.map((url) => {
  return (
    <li>
      <a href={`https://jeng.internal.com/browse/${url}`} id={`${url}_link`}>
        {url}
      </a>
    </li>
  );
});

return (
  <>
    <h1>{yname}</h1>
    <h2>{ydesc}</h2>
    <ul>{linkElements}</ul>
  </>
);

edited May 01 '23 at 05:29

answered May 01 '23 at 05:23

oluroyleseyler

802
2
5

How can I convert an array of URLs to HTML links?

1 Answers1