1
<tbody>
                {map(items, item =>
                    <Link to={routeUrl(ROUTES.SOMEWHERE, item.id)}>
                    <tr key={item.id}>
                        <td>
                            {item.name}
                        </td>
                        <td>
                            {item.country}
                        </td>
                        </tr>
                    </Link>
                )}
            </tbody>

This won't work, any clue why? I can put the Link component within the td but I want the entire row to be clickable.

Jessica Robertson
  • 377
  • 1
  • 5
  • 17
  • 1
    That does not result in valid HTML, `tbody` tags may only contain `tr` tags, `tr` tags may only contain `td` or `th` tags, see [link](http://www.w3schools.com/tags/tag_table.asp). – ccKep Feb 12 '17 at 04:17
  • @ccKep where should I put my Link component then? – Jessica Robertson Feb 12 '17 at 04:19
  • On the text (eg. inside the `td`) you want the link on. If you want the whole row to be clickable you really only have 2 options: a) JS on-click events triggering a `window.location` change ([example](http://stackoverflow.com/questions/17147821/how-to-make-a-whole-row-in-a-table-clickable-as-a-link)) b) Style your `a` tags so they look like a table row and don't use an HTML `` at all.
     – ccKep Feb 12 '17 at 04:20
  • You can add links to each cell, you can also add a click handler to the tr that calls click() on one of those links in the cells – Ruan Mendes Feb 12 '17 at 04:22
  • @cckep no need to call window.location yourself, you can have the click handler for the tr call click on one of the links in the cells – Ruan Mendes Feb 12 '17 at 04:24
  • 1
    @JuanMendes I was thinking about something along the line of (jquery-style) `` and `window.location.href = $(this).data("href")` in an on-click handler - although your idea works aswell! – ccKep Feb 12 '17 at 04:26
  • @cckep it's because Link has special behavior to work with the router, but I may be overthinking it. The OP has two good leads now. – Ruan Mendes Feb 12 '17 at 04:33

1 Answers1

0

According to JSX rules, a Link component should contain only a string and not another component. Instead of using Link you can add onClick method on tr component and then you can define the route where you want to go in the body of onClick.

Rahul Singh
  • 892
  • 9
  • 24