Extract React function component
Extract JSX element or fragment into a React Function Component.
How do I perform this refactoring?
- Select the JSX element that you want to extract, e.g., using smart expand selection.
- Open the extract context menu.
- Extract the component.
- Enter a name for the extracted component.
Why is this refactoring helpful?
Extracting a React component helps you modularize your code. The extracted component can be reused, documented, and tested separately. The original code becomes more concise and readable, especially if you choose a descriptive component name.
What do I need to consider?
P42 analyzes only the file that you are currently working on. Type information might be accurate, and the parameter type signature of the extracted Function Component might contain
- Code Assist ID (for the configuration file):
- You can configure custom keyboard shortcuts with these code action kinds: