Skip to content

Warning: A props object containing a "key" prop is being spread into JSX #248

Open
@tunnaduong

Description

@tunnaduong

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I used GitHub Copilot to fix the following problem:

Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, indicator: ..., style: ..., source: ...};
  <FitImage {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {indicator: ..., style: ..., source: ...};
  <FitImage key={someKey} {...props} />

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-markdown-display/src/lib/renderRules.js b/node_modules/react-native-markdown-display/src/lib/renderRules.js
index 6f2ed8d..9a5c194 100644
--- a/node_modules/react-native-markdown-display/src/lib/renderRules.js
+++ b/node_modules/react-native-markdown-display/src/lib/renderRules.js
@@ -270,9 +270,9 @@ const renderRules = {
     allowedImageHandlers,
     defaultImageHandler,
   ) => {
-    const {src, alt} = node.attributes;
+    const { src, alt } = node.attributes;
   
-    // we check that the source starts with at least one of the elements in allowedImageHandlers
+    // Check if the source starts with at least one of the allowed image handlers
     const show =
       allowedImageHandlers.filter((value) => {
         return src.toLowerCase().startsWith(value.toLowerCase());
@@ -284,7 +284,6 @@ const renderRules = {
   
     const imageProps = {
       indicator: true,
-      key: node.key,
       style: styles._VIEW_SAFE_image,
       source: {
         uri: show === true ? src : `${defaultImageHandler}${src}`,
@@ -296,7 +295,8 @@ const renderRules = {
       imageProps.accessibilityLabel = alt;
     }
   
-    return <FitImage {...imageProps} />;
+    // Pass the key directly to the FitImage component
+    return <FitImage key={node.key} {...imageProps} />;
   },
 
   // Text Output

This issue body was partially generated by patch-package.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions