From fbb9ae055be89d8ad00df80072cfaffe5fd8adc8 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Wed, 25 Jan 2023 10:44:41 +0100
Subject: [PATCH] [docs] Update the "remove props" example

The remove prop example suffers one issue: nested components

If you have two nested components with the same prop it will be removed to both of them.

For example

```jsx
<A prop="test">
  <B prop="test2" />
</A>
```

Using the example to remove `prop` from `<A />` Will also remove it from `<B />` because find also cover the nested elements
---
 website/docs/recipes/react.mdx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/website/docs/recipes/react.mdx b/website/docs/recipes/react.mdx
index 4e1558831..5f9d8dd50 100644
--- a/website/docs/recipes/react.mdx
+++ b/website/docs/recipes/react.mdx
@@ -71,6 +71,17 @@ export default function transformer(file, { jscodeshift: j }, options) {
     .filter(path => path.value.openingElement.name.name === 'button') // Find all button jsx elements
     .find(j.JSXAttribute) // Find all attributes (props) on the button
     .filter(path => path.node.name.name === 'onClick') // Filter to only props called onClick
+    .filter(path => {
+      // Verrify the attribute is not associated to a nested component
+      const attributeParent = attribute.parentPath.parentPath;
+      if (
+        attributeParent.value.type === 'JSXOpeningElement' &&
+        componentNames.includes(attributeParent.value.name.name)
+      ) {
+        return true;
+      }
+      return false;
+     })
     .remove(); // Remove everything that matched
 
   return source.toSource();