Skip to content

Conversation

@Suraj704-glitch
Copy link

@Suraj704-glitch Suraj704-glitch commented Jan 27, 2026

…oolbar

resolve missing unique key prop warnings in ChatInputFormattingToolbar

Acceptance Criteria fulfillment

  • Task 1 : Identified and resolved missing unique key props in "ChatInputFormattingToolbar.js"
  • Task 2 : Replaced unkeyed fragments with keyed components in .map() functions.
  • Task 3 : Verified the fix in Storybook by ensuring the React console warnings are eliminated.

Fixes # (issue) Fixes #1098

Screenshots

Evidence of Fix

I have attached screenshots showing the successful resolution of the React "missing key" warning.

Before Fix: The browser console displays a warning: Warning: Each child in a list should have a unique "key" prop, specifically pointing to the ChatInputFormattingToolbar.js component.
Screenshot 2026-01-27 170420

After Fix: Upon applying the stable keys and replacing unkeyed fragments, the console is clean and the ChatInput UI renders successfully without any reconciliation warnings.
Screenshot 2026-01-27 170827

PR Test Details

Launched the environment using yarn storybook.

Logged in using https://open.rocket.chat as the host to mount the ChatInput component.

Inspected the Browser Console (F12) to confirm that the yellow "unique key prop" warning no longer appears when the toolbar renders.

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-1118 after approval. Contributors are requested to replace #1118 with the actual PR number.

@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@Suraj704-glitch
Copy link
Author

"I have submitted a fix for this issue in PR #1118. I've resolved the missing unique key warnings in the ChatInputFormattingToolbar and verified the fix in a live environment using open.rocket.chat. Ready for review!"

@Suraj704-glitch
Copy link
Author

@cla-assistant recheck

@Suraj704-glitch
Copy link
Author

Hi Team,

I have already signed the CLA (as shown in the CLA assistant dashboard), but the status is still pending here. Since this is my first contribution, the workflows are also awaiting approval. Could a maintainer please approve the workflows to run the tests and verify the CLA status?

I have fixed the "missing unique key prop" warnings in the ChatInputFormattingToolbar component and verified it in the live environment. Ready for review!

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Missing unique "key" prop in ChatInputFormattingToolbar components

3 participants