Recompose: How do you get at events in withStateHandlers?

Created on 30 Jul 2017  路  6Comments  路  Source: acdlite/recompose

Here's a contrived example (I'm using React Native).

const App = ({ positionX, handleButtonPressX, positionY, handleButtonPressY }) =>
  (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button title="Set X Position" onPress={handleButtonPressX} />
    <Button title="Set Y Position" onPress={handleButtonPressY} />
    <Text style={{ marginTop: 30 }}>
      {`X: ${positionX}\nY: ${positionY}`}
    </Text>
  </View>);

const trackPositionX = compose(
  withState('positionX', 'setPositionX', ''),
  withHandlers({
    handleButtonPressX: ({ setPositionX }) => (event) => {
      setPositionX(Math.floor(event.nativeEvent.pageX));
    },
  }),
);

const trackPositionY = withStateHandlers(
  () => ({
    positionY: '',
  }),
  {
    handleButtonPressY: () => (event) => ({
      positionY: Math.floor(event.nativeEvent.pageY),
    }),
  },
);

When clicking the Set Y Position button I get the error
null is not an object (evaluating 'event.nativeEvent.pageY')

It seems event is undefined. I know this is probably a basic programming concept I'm not getting. Can someone help me understand?

Thanks!

bug good first issue help wanted

All 6 comments

At the moment of setState state function is called event can be already freed, as React reuses event object.
Seems like we need to fix this somehow.

It will be a good PR

For more details plz read React docs about event.persist

I really want to help with this but am completely out of my element even getting things set up.
I've forked the repo and cloned locally but don't know what to do next.

How do I set up my local project to use the cloned version of recompose? Is that the easiest way for me to test if my changes are working. Is there a better way?

Sorry, total newb at contributing to an external project.

@GollyJer You can try to create a simplified version of your code base on this jsfiddle. Removing irrelevant code can help us help you.

Sorry I miss read your comment. What you need is how to setup an env to develop recompose itself.

@GollyJer You should run yarn install after cloning this repo, then run yarn run test:watch which will run all tests and watch all source file. If there is a change to source files, it will rerun the related tests.

Was this page helpful?
0 / 5 - 0 ratings