[HOLD for payment 2023-06-28] [$250] Migrate Checkbox.js to function component

[marcaaron]

Class Component Migration

Filenames

• src/components/Checkbox.js
  • type: React.Component
  • has state values: true
  • has refs: true
  • has context: false
  • lifecycle methods: none

Task

• We currently have some class components in our codebase that we would like to refactor to a function component.
• Here's a link with some general advice on how to refactor a class component to a function component: https://react.dev/reference/react/Component#alternatives
• If you need additional guidance, please ask in #expensify-open-source
• Test for any regressions and verify that there are no breaking changes

[kuluruvineeth]

Proposal

Please re-state the problem that we are trying to solve in this issue.

-> Class Component Migration for Checkbox Component

What is the root cause of that problem?

-> class components are more verbose and harder to reason about than functional components.

What changes do you think we should make in order to solve the problem?

-> In the function component I would use the useState hook to create a state value isFocused.
-> And two functions onFocus and onBlur to update the state value.
-> And also refactor two callback functions handleSpaceKey and firePressHandlerOnClick to handle keydown and click events respectively.
-> Finally Modify the firePressHandlerOnClick function to use the useState hook to update the isFocused state value.

What alternative solutions did you explore? (Optional)

[marcaaron]

@kuluruvineeth Please stop spamming the issues in this repo. You are free to comment on things that have the Help Wanted label on them.

[kuluruvineeth]

@marcaaron my apologies, i was not aware that this issues were internal i learnt the same just a while ago. I shall make sure it won't happen again thanks.

[marcaaron]

Yeah, there's not really any good reason to spam a bunch of issues with similar comments in any case. If you are not sure about something ask in Slack and we are happy to provide assistance there, thanks!