Code Quality: Refactor all React class components to functional components using hooks

The official recommendation for writing React components is as follows.

All components should be implemented as function components, using hooks for managing component lifecycle and state.

If you're a new/junior contributor looking to help with this refactoring, follow these steps:

• Search for class components on the codebase (For example by searching extends Component
• Pick a component to refactor.
• Comment on this issue saying that you're working on the said component.

---

Note This is a tracking issue for the React components guidelines. This issue is tailored specifically for junior and new contributors. Experienced contributors shouldn't do big refactorings unless they update the code for another reason (bug fix, feature).