3

I am trying to embed Tableau worksheets into my ReactJS application. I have a menu with a list of report names (in react) and when the menu item is clicked, it updates state which contains the report name. I decided to use the tableau-react npm package to complete this task.

When I first click on a menu item, it properly embeds the tableau report onto the page. When I click on another menu item (updating the state which is feeding the url) the tableau report refreshed, but continues to show the first report as if the url did not change. If I then click on a third menu item, the embed tableau report will refresh again, but this time it will show the second report item I clicked. Every subsequent menu item click refreshes the embed tableau report to the previous item clicked.

I am controlling state using Redux and in the Redux Dev Tools I've determined that everything with state is running correctly. Every menu item click properly updates state. I also put a console.log on the url that is being passed to the TableauReport url attribute, and that is correct also.

const Reports = props => {
  const { reportUrl } = props;
  return (
    // Tableau Report Documentation:  https://github.com/coopermaruyama/tableau-react
    reportUrl && <TableauReport url={reportUrl} />
  );
};

User Interaction

Menu Item Click            Tableau Report Shown
---------------            --------------------
null                       null
Report 1                   Report 1
Report 2                   Report 1
Report 3                   Report 2
Report 4                   Report 3
Report 5                   Report 4
K. Peters
  • 195
  • 3
  • 13
  • This could be a problem with the tableau-react npm package. I would suggest you open up a Github issue (and cross-reference this SO question). – tagyoureit Aug 05 '19 at 18:45

1 Answers1

1

There was an issue with the tableau-react npm package. When changing the url, it was not properly taking the new url and passing it to tableau. I discussed the issue with the owner of tableau-react and we got a change deployed to fix the issue.

Fix pull request: https://github.com/coopermaruyama/tableau-react/pull/16

K. Peters
  • 195
  • 3
  • 13