<Bar> onClick handler is called on render, not on click about visx HOT 7 CLOSED

@jnelken you probably have something like

onClick={function(event) {
  // ...
}}

when you want

onClick={function(data) {
  return function(event) {
    // ...
  };
}}

from visx.

I suspect this is some bug related to my code, if I find out otherwise will reopen.

from visx.

Ah this is by design at the moment. props that are functions need to be thunks. I'm still playing around with this part of the api, so this might change in the future. I hope to lock it down in the next week or two.

Here's the fix:

      return (
        <Group key={`bar-${x(d)}`}>
          <Bar
            width={xScale.bandwidth()}
            height={barHeight}
            x={xScale(x(d))}
            y={yMax - barHeight}
            fill="rgba(23, 233, 217, .5)"
-           onClick={ function(){ console.log('bar clicked'); }}
+ .         data={{ x: x(d), y: y(d) }}
+           onClick={data => event => {
               console.log(`bar clicked: ${JSON.stringify(data)}`)
            }}
          />
        </Group>
      );

You can see this in action here:

• https://vx-demo.now.sh/bars
• https://vx-demo.now.sh/barstack

from visx.

Ah that's interesting.

Is having access to the component's "data" the main motivation for using a thunk here?

from visx.

Exactly, it's a bit silly in the simple bar graph example. But it's handy for multiple series like BarStack, BarGroup, or Heatmap

from visx.

why not provide the data as this? or as a 2nd argument?

from visx.

Can we open this back up? It is still not available. It is still called on render for me ("(at)vx/shape": "^0.0.153")

from visx.