Add keys when rendering lists

[renatonascalves]

See: https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key

Summary by CodeRabbit

• Refactor: Enhanced the stability and predictability of the user interface by adding unique identifiers to elements within the post and taxonomy mapping functions. This update improves the overall user experience by ensuring consistent behavior across different parts of the application.

[coderabbitai]

Walkthrough

The changes primarily focus on enhancing the React component structure in the blocks/query/edit.tsx file. The Fragment component from @wordpress/element has been imported and used in the code. Additionally, the key prop has been added to the manual-posts__container and Fragment components in the map functions to ensure unique identification of each element in the list, improving the performance of React's reconciliation process.

Changes

File	Summary
blocks/query/edit.tsx	The Fragment component has been imported from @wordpress/element. The key prop has been added to the manual-posts__container and Fragment components in the map functions for manualPosts and allowedTaxonomies respectively.

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• If you reply to a review comment from CodeRabbit, the bot will automatically respond.
• To engage with CodeRabbit bot directly around the specific lines of code in the PR, mention @coderabbitai in your review comment
• Note: Review comments are made on code diffs or files, not on the PR overview.
• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai help to get help.

Note: For conversation with the bot, please use the review comments on code diffs or files.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.json

[coderabbitai]

Review Status

Actionable comments generated: 0

Commits

Files that changed from the base of the PR and between d2eb805 and 8d17b55.

Files selected for processing (1)

• blocks/query/edit.tsx (4 hunks)

Additional comments (Suppressed): 3

blocks/query/edit.tsx (3)

• 14-14: The Fragment import has been added. This is a good practice as it allows grouping of a list of children without adding extra nodes to the DOM.

• 341-344: The key prop has been added to the manual-posts__container element. This is a good practice as it helps React identify and track each element in the list for efficient updates.

-             )}
+             )}
+             key={index}

• 368-374: > Note: This review was outside of the patch, so it was mapped to the patch with the greatest overlap. Original lines [368-380]

The key prop has been added to the Fragment element in the mapping of allowedTaxonomies. This is a good practice as it ensures that each rendered item in the allowedTaxonomies list has a unique key, improving performance and consistency during re-renders.

-              <>
+              <Fragment key={taxonomy}>

[kaitlinbolling]

👍

[coderabbitai]

Review Status

Actionable comments generated: 1

Commits

Files that changed from the base of the PR and between 8d17b55 and 07af170.

Files selected for processing (1)

• blocks/query/edit.tsx (4 hunks)

Additional comments (Suppressed): 2

blocks/query/edit.tsx (2)

• 11-22: The Fragment component has been imported from @wordpress/element. Ensure that all instances where Fragment is used have been updated accordingly.

• 346-352: The key prop has been added to the manual-posts__container component. This is a good practice for list items in React as it helps React identify which items have changed, are added, or are removed, and enhances the performance of the list rendering.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 07af170 and f8e6a0e.

Files selected for processing (1)

• blocks/query/edit.tsx (4 hunks)

Files skipped from review due to trivial changes (1)

• blocks/query/edit.tsx

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between f8e6a0e and 76864c6.

Files selected for processing (1)

• blocks/query/edit.tsx (4 hunks)

Files skipped from review due to trivial changes (1)

• blocks/query/edit.tsx