What would be the best way to add data-hooks to table row data

Question

I want to add an additional property to each row in a React-Virtualized table so that automation can have an easier job identifying the resultant row data and then verifying it.

Looking at the docs and the code it appears that the easiest would be to simply copy defaultTableRender and modify it to add the data-hook that I want, however I'm reluctant to do this since I don't want the maintenance cost of tracking changes to the original function and porting them forward.

Another option is to wrap result of defaultRowRenderer in a div with the properties that I need, something like:

      rowRenderer={(props) => {
        return (
          <div
            key={props.key}
            data-hook={data[props.index].id}>
            {defaultTableRowRenderer(props)}
          </div>
        )
      }}

This works but seems awfully heavy handed.

Yet another option would be to clone the element and then just add the properties that I want:

      rowRenderer={(props) => {
        return React.cloneElement(
          defaultTableRowRenderer(props),
          {'data-hook': data[props.index].id})
      }}

This might be the cleanest, though I suspect that I should turn my SFC into a Component and turn my fat arrow renderer into a class function with state so that it's not recreated on every render.

Is there a simpler way that I'm missing?

Answer 1

I think you've pretty much got it right with those 3. My vote would be to fork the default renderer. This would offer you the best performance (though the difference may be pretty trivial). As for your maintenance concerns, the row-renderer is pretty stable.