How to map to URL in a bootstrap table?

Question

I am pulling data that gives me a news article title and url separately:

I would like to combine the url and title. Here is how I am mapping the table:

<Table striped bordered hover variant="dark">
<thead>
  <tr>
    <th>Title</th>
    <th>URL</th>
  </tr>
</thead>
{props.value.map(item => (
  <tbody key={item.id}>
      <tr>
        <td>{item.title}</td>
        <td>{item.url}</td>
      </tr>
  </tbody>
))}

);

So I want the title to be a link to the url, instead of having the separation that is currently occurring. How can I accomplish this? The unique thing is each title has a different URL - all the resources I have found only show mapping for a single URL.

Answer 1

Try like this.

<Table striped bordered hover variant="dark">
<thead>
  <tr>
    <th>Title</th>
  </tr>
</thead>
{props.value.map(item => (
  <tbody key={item.id}>
      <tr>
        <td><a href={item.url}>{item.title}</a></td>
      </tr>
  </tbody>
))}