2

https://codesandbox.io/s/qYEvQEl0

I try to render a list of draggables, everything seems fine only that I can't figure out how to pass 'index' into rowRenderer

If I do rowRenderer=props => <Row {...props}/>, index is passed in sucessfully.

But if I do:

const SortableRow = SortableElement(Row)

rowRenderer=props => <SortableRow {...props}/> ,

index is blocked somehow, failed to pass into <Row/>

Basically, I don't understand what can go wrong when you wrap your <Row/> component with a HOC? Why some props get to pass in, others not?

Fate Riddle
  • 364
  • 1
  • 3
  • 15

1 Answers1

2

Copy the index into a different, custom prop...

rowRenderer = props => {
  console.log(props.index);
  return <SortableRow {...props} indexCopy={props.index} />;
};

Then, inside the child component, refer to this custom prop instead.

const Row = ({ indexCopy , style }) => {
  console.log(indexCopy);
  return (
    <div style={style}>
      <span>drag</span>
      <input placeholder={'haha'} />
      <span>index={indexCopy || 'undefined'}</span>
    </div>
  );
};

I'm not too familiar with HOCs, but I suspect that the react-sortable-hoc library is stripping out the implicit index and key values. However, as long as you copy them over into their own custom props, you should be fine.

Denny
  • 744
  • 4
  • 10
  • Hi, a separate question while you are at it. https://stackoverflow.com/questions/44775957/weird-interaction-react-virtualized-working-with-react-sortable-hoc – Fate Riddle Jun 27 '17 at 08:50