React components should be rendered as standard JSX elements, not called as functions, and should follow established architectural patterns. This ensures consistency with React conventions and maintainability.
When you see a component being called as a function like WorkflowActionMenuItems(props), refactor it to proper JSX syntax: <WorkflowActionMenuItems {...props} />. Additionally, ensure components have proper data backing and follow established patterns in the codebase.
Example of incorrect usage:
{WorkflowActionMenuItems(HUMAN_INPUT_ACTIONS, theme, handleCreateStep)}
Example of correct usage:
<WorkflowActionMenuItems
actions={HUMAN_INPUT_ACTIONS}
theme={theme}
onCreateStep={handleCreateStep}
/>
This pattern maintains React’s declarative nature and ensures components integrate properly with React’s rendering system and developer tools.
Enter the URL of a public GitHub repository