<Bar> onClick handler is called on render, not on click

I’m noticing something odd - it seems that the <Bar> component’s onClick handler is called when it is rendered.

I noticed it while following the example in VX’s gallery: https://vx-demo.now.sh/bars

Here is code to reproduce it.

It has a console.log on render, when the SVG is clicked, and when the Bar is clicked. Notice that the console.logs for the bar being clicked are all present after each render.

import React, { Component } from 'react';
import { Bar } from '@vx/shape';
import { Group } from '@vx/group';
import { GradientTealBlue } from '@vx/gradient';
import { letterFrequency } from '@vx/mock-data';
import { scaleBand, scaleLinear } from '@vx/scale';
import { extent, max } from 'd3-array';

export default class VXBarTest extends Component {
  render(){
    console.log('render');
    const data = letterFrequency.slice(5);

    function round(value, precision) {
      var multiplier = Math.pow(10, precision || 0);
      return Math.round(value * multiplier) / multiplier;
    }

    // accessors
    const x = d => d.letter;
    const y = d => +d.frequency * 100;

    const width = 750;
    const height = 400;

    if (width < 10) return null;

    // bounds
    const xMax = width;
    const yMax = height - 120;

    // scales
    const xScale = scaleBand({
      rangeRound: [0, xMax],
      domain: data.map(x),
      padding: 0.4,
    });

    const yScale = scaleLinear({
      rangeRound: [yMax, 0],
      domain: [0, max(data, y)],
    });

    const bars = data.map((d, i) => {
      const barHeight = yMax - yScale(y(d));

      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'); }}
          />
        </Group>
      );
    });

    return (
      <svg
        width={width}
        height={height}
        onClick={ function(){ console.log('svg clicked'); }}>
        <GradientTealBlue id="teal" />
        <Group top={40}>
          {bars}
        </Group>
      </svg>
    );
  }
}

[hshoff]

@jnelken you probably have something like

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

when you want

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

[jnelken]

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”)