Href Or Link in .map elements which has props and childrens

Question

I have datas which will be populated and displayed in table structure using .map function

What do i want?

I want to make each element as a clickable link. So that the corresponding product will be opened in a new tab

here is the piece of code

<div className="product-section">
  <div className="card-body">
    <div className="table-scroll">
      <table
        className={
          sortSelectedCategorySetAttributes.length > 1
            ? "table table-striped table-borderless"
            : "column-noscroll"
        }
        style={{ marginTop: "0px" }}
      >
        <thead>
          <tr>
            <th className="sticky-fix">PRODUCT</th>
            {sortSelectedCategorySetAttributes &&
              sortSelectedCategorySetAttributes.map((attributes, index) => {
                return (
                  <th style={fixedHeader} key={index}>
                    {" "}
                    {attributes && attributes.name.toUpperCase()}
                  </th>
                );
              })}
          </tr>
        </thead>
        {console.log(rowData)}
        <tbody>
          {rowData.map(ele => {
            return <a href={ele.key}>{ele}</a>;
          })}
        </tbody>
      </table>
    </div>
  </div>
</div>;

Console.log attached here

Can you provide more details about your app, like what modules/packages/libraries you're using for navigation, what a "Link" is (is it a component?)? Please also include [Minimal, Complete, and Reproducible](https://stackoverflow.com/help/minimal-reproducible-example) code, **and** explicitly what your expected result should be. — Drew Reese, Mar 15 '20 at 05:54
Producing the code is not possible since it involves complex backend as well frontend.. the above code displays products in tabular format, what i need is.. each product displayed in the table should have link, when we click on the link it should open separate page to display the product details — Logesh P, Mar 15 '20 at 06:19
Sorry, I meant for *just* the component doing the mapping. What it imports and uses, and its complete code, so we can better estimate what it is capable of. Does this answer your question? [Open a URL in a new tab (and not a new window)](https://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window) — Drew Reese, Mar 15 '20 at 06:23
To open link in new tab use `target="_blank"` in the anchor tag. In your case, something like this will work `{ele}`. — karbyl_subbu, Mar 15 '20 at 07:56

Href Or Link in .map elements which has props and childrens

0 Answers0