Links to external resource are empty in React

Question

In a React app I have a Table tbody of which looks the following way:

<tbody>
                        {
                        this.state.datasets.map((datasetName, idx) => {
                          return (<tr>
                            <td>
                              <div className={"pretty p-default p-curve"}>
                                <input id = {"datasetCheckBox" + idx}
                                  checked = {this.state.checkBoxSelected === datasetName}
                                  type="radio" name="datasetName"
                                  onChange={(e) => this.checkBoxSelected(datasetName, e)}/>
                                  <div className={"state p-primary"}>
                                     <label>{idx}</label>
                                 </div>
                              </div>
                            </td>
                            <td>{datasetName}</td>
                            <td>{datasetsJSON["datasets"][datasetName]["region"]}</td>
                            <td>{datasetsJSON["datasets"][datasetName]["authors"]}</td>
                            <td>
                              <a href={datasetsJSON["datasets"][datasetName]["link"]}>{datasetName}</a>
                            </td>
                          </tr>)
                        }, this)
                      }
                      </tbody>

The link is shown with an empty href even though other parameters of the table from datasetsJSON["datasets"][datasetName] are set correctly. I tried using React Router and the only piece of code that redirected to links is in the answer here:

React-Router External link

But in the answer to the question above if I set path="/", when the table loads, it is just redirecting me straight away to the first link. I would expect then that for each link the path should be different, but supplying datasetsJSON["datasets"][datasetName]["link"] as a path does not work either. Why is the simple link a empty? How could I fix it?

Are you able to print out the link as text above outside of the a tag like so {datasetsJSON["datasets"][datasetName]["link"]} — Mark, Mar 16 '19 at 04:31
Also. For sanity check can you console.log the whole datasets.JSON["datasets"][datasetName] object? — Mark, Mar 16 '19 at 04:32
Sure, prints out nicely the correct urls. Also the link is inside the modal if it can be of importance here, although I doubt it — Nikita Vlasenko, Mar 17 '19 at 03:00

Nikita Vlasenko · Answer 1 · 2019-03-19T21:10:32.750

I solved it by using onClick method instead of href link attribute. In the table I have:

<td onClick = {() => this.articleClicked(datasetName)}>
     <span role="button"><a>{datasetName}</a></span>
</td>

Then, onClick method:

  articleClicked = (datasetName) => {
    let url = datasetsJSON["datasets"][datasetName]["link"];
    window.open(url);
  }

<span role="button"> is needed for the cursor to show hand when the user is hovering over the link. It is bootstrap thing.

Links to external resource are empty in React

1 Answers1