chore: clean react error in the console

[tim48-robot]

Description

• Identified a React warning/error appearing in the browser console regarding

  1. stroke-width, stroke-... not following react convention.
  2. "Encountered two children with the same key, item-3. Keys should be unique so that components maintain their identity across updates."

• Fixed by updating keys in the Hero component to include the array index for uniqueness. Also cleaned the strokeWidth etc.

• Verified that the console is now clean and the error no longer persists when running the application.

Screencast_20251125_002218.webm

@princerajpoot20

Summary by CodeRabbit

• Bug Fixes

  • Improved key generation for orbit rendering to prevent potential display issues with duplicate identifiers.

• Chores

  • Updated SVG attribute formatting to align with React JSX conventions.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify[bot]]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	993de5c36627ba5c9186bb22cc24c3189ce8f93a
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/692d789ad377060008d9a3a9
😎 Deploy Preview	https://deploy-preview-4642--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai[bot]]

Walkthrough

Two components receive refactoring updates: Hero.tsx modifies orbit map keys to use composite identifiers combining orbit ID and index for uniqueness, while Dashboard.tsx corrects SVG attribute naming from kebab-case to camelCase to align with React JSX conventions.

Changes

Cohort / File(s)	Summary
Orbit Key Uniqueness components/community/Hero.tsx	Modified three orbit map callbacks to accept (orbit, index) parameters and generate composite keys using ${orbit.id}-${index} instead of orbit.id alone, ensuring unique DOM keys when orbit IDs may duplicate.
SVG Prop Normalization components/icons/Dashboard.tsx	Converted SVG attribute names from kebab-case to camelCase: stroke-width → strokeWidth, stroke-linecap → strokeLinecap, stroke-linejoin → strokeLinejoin for proper React JSX prop handling.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Both changes are localized, low-complexity updates with no behavioral alterations or logic interactions
• No risk of side effects; fixes are straightforward attribute/key corrections

Poem

🐰 Keys now composite, SVG props aligned, Tiny fixes that improve the mind, Orbit dances with indices true, Dashboard glows in camelCase blue, Small tweaks, big joy for the crew! 🌟

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'chore: clean react error in the console' accurately describes the main changes: fixing React console errors (duplicate keys and SVG attributes) in the Hero and Dashboard components.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ddc2d8747334c49f3c3ae13a056bd61bd443b008 and ec8d728eb595c45c5851dc4418e291c11fe68de4.

📒 Files selected for processing (2)

• components/community/Hero.tsx (2 hunks)
• components/icons/Dashboard.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Test NodeJS PR - windows-latest
• GitHub Check: Lighthouse CI

🔇 Additional comments (2)

components/icons/Dashboard.tsx (1)

17-19: LGTM! SVG attributes correctly converted to React JSX conventions.

The changes properly convert kebab-case SVG attributes to camelCase, which is the correct format for React JSX. This eliminates the console warnings without affecting the visual rendering.

components/community/Hero.tsx (1)

20-21: LGTM! Composite keys correctly fix duplicate ID issue.

The data structure confirms the fix: all items within each orbit share the same id value ("item", "item-2", "item-3"), which was causing React's duplicate key warning. By adding the array index, the keys become unique (item-0, item-1, etc.) while the data remains static and non-reordered—making this the appropriate solution.

[!TIP]

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions: | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context. Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 100.00%. Comparing base (3fc64a4) to head (993de5c).

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #4642   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          799       799           
  Branches       146       146           
=========================================
  Hits           799       799           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	41
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-4642--asyncapi-website.netlify.app/

[princerajpoot20]

@tim48-robot Please create an issue first.

If you think something needs to be done, the flow should be to first create an issue, maybe have a discussion there if needed, and once the issue is approved, you can then create a PR for it.

[tim48-robot]

Thank you for the response @princerajpoot20 ! I was just wondering, i didnt make an issue first because i thought not following react convention is a really obvious error ( a very small change tho )

Written in CONTRIBUTING.MD: Please open an issue before starting a Pull Request unless it's a typo or a really obvious error. Pull requests are the best way to propose changes to the specification. It may be rejected if no issue was created first to discuss the need for a pull request.

May i know what kind of code change or scope is a really obvious error? ( So later i won't make the same mistake by not creating an issue first )

[princerajpoot20]

@tim48-robot There is no such thing as a very small change A bug is a bug, and the size of the error should not change the standard workflow unless you have strong reasoning/necessity behind it

[tim48-robot]

@princerajpoot20 okayy sir thankyou for the answer, i will close the pr right away

[princerajpoot20]

@tim48-robot Now that you’ve already raised the PR, please don’t close it. Just create an issue and link it to this PR. We will review the issue and move this PR accordingly.

Thanks for your contribution!