[BUG] Missing React key prop in AvailableOperations component causes console warning #1985
Description
Describe the bug.
The packages/components/src/components/readme/AvailableOperations.js component renders a list of AsyncAPI operations without providing a unique [key] prop to the mapped elements. This causes React to emit a warning during test execution and component rendering.
Root Cause:
Warning: Each child in a list should have a unique "key" prop.
See https://reactjs.org/link/warning-keys for more information.
In [AvailableOperations.js] at line 40, the [.map()] function renders []components without a [key] prop
{operations.map((operation) => ( <Text newLines={2}> // ❌ Missing key prop <OperationHeader operation={operation} /> <MessageExamples operation={operation} /> </Text> ))}
Add [key={operation.id()}] to the mapped [] element:
{operations.map((operation) => ( <Text key={operation.id()} newLines={2}> // ✅ Key prop added <OperationHeader operation={operation} /> <MessageExamples operation={operation} /> </Text> ))}
All tests passed✅
React warning gone✅
Best Code practice✅
👀 Have you checked for similar open issues?
- I checked and didn't find similar issue
🏢 Have you read the Contributing Guidelines?
- I have read the Contributing Guidelines
Are you willing to work on this issue ?
Yes I am willing to submit a PR!