viz doesn't refresh after state change

[Tomedry]

Hi! When changing state for the 1st time (clicking on the Tom button) the viz re-renders and the filter is applied. After that the viz doesn't refreshes at all, no matter when button I click, the state changes and F12 shows that the viz does re-render, but no change is applied to the viewed viz.

Would love it if this could be checked, thanks!

const Stats = () => {
  const [name, setName] = useState<String>("Ofir");

  const options = {
    hideTabs: true,
    hideToolbar: true
  };

  const filters = {
    Name: name
  };

  return (
    <div>
      <button
        onClick={() => {
          setName("Tom");
        }}
      >
        Tom
      </button>
      <button
        onClick={() => {
          setName("Ofir");
        }}
      >
        Ofir
      </button>
      <Tableau
        url="~~~~~~~"
        filters={filters}
        options={options}
        query="?:embed=yes&:comments=no&:toolbar=yes&:refresh=yes"
      />
    </div>

[Tomedry]

Checked the network tab, on the first button click there is a network request, but after that click there's no network activity

Attached photo: network request on first button clicked

[coopermaruyama]

Hi,

the library should be updating changed filters asynchronously.

I think the reason it doesn't work for you is because in javscript, comparison of objects compares reference instead of value. So the value of filters before and after the update are the same even though filters.Name is different.

Try this instead:

const Stats = () => {
  const [name, setName] = useState<String>("Ofir");

  const options = {
    hideTabs: true,
    hideToolbar: true
  };

  return (
    <div>
      <button
        onClick={() => {
          setName("Tom");
        }}
      >
        Tom
      </button>
      <button
        onClick={() => {
          setName("Ofir");
        }}
      >
        Ofir
      </button>
      <Tableau
        url="~~~~~~~"
        filters={{ Name: name }}
        options={options}
        query="?:embed=yes&:comments=no&:toolbar=yes&:refresh=yes"
      />
    </div>