From 1fcc6d609f07c9f25d77c9c5e34631ff9a00ba97 Mon Sep 17 00:00:00 2001
From: Shivam Agarwal <99248722+shivamagarwal2510@users.noreply.github.com>
Date: Tue, 31 Dec 2024 20:01:55 +0530
Subject: [PATCH] Update documentation based on recent code changes

Appended E:\FinalAutoDoc\extractedRepos\shivamagarwal2510\react.devdocumentation\shivamagarwal2510/react.dev\src\content\warnings\unknown-prop.md
Created shivamagarwal2510/react.dev/src/content/blog/[VERSION]-dom-nesting-changes.md
---
 .../blog/[VERSION]-dom-nesting-changes.md     |   7 +
 src/content/warnings/unknown-prop.md          | 153 +++++++++++-------
 2 files changed, 99 insertions(+), 61 deletions(-)
 create mode 100644 src/content/blog/[VERSION]-dom-nesting-changes.md

diff --git a/src/content/blog/[VERSION]-dom-nesting-changes.md b/src/content/blog/[VERSION]-dom-nesting-changes.md
new file mode 100644
index 00000000000..3e381cbf645
--- /dev/null
+++ b/src/content/blog/[VERSION]-dom-nesting-changes.md
@@ -0,0 +1,7 @@
+---
+title: DOM Nesting Validation Changes
+---
+
+### DOM Nesting Validation Changes
+
+- Added support for `<script>` and `<template>` tags within `<select>` elements
\ No newline at end of file
diff --git a/src/content/warnings/unknown-prop.md b/src/content/warnings/unknown-prop.md
index 80bcdb14296..15c97581689 100644
--- a/src/content/warnings/unknown-prop.md
+++ b/src/content/warnings/unknown-prop.md
@@ -1,61 +1,92 @@
----
-title: Unknown Prop Warning
----
-
-The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
-
-There are a couple of likely reasons this warning could be appearing:
-
-1. Are you using `{...props}` or `cloneElement(element, props)`? When copying props to a child component, you should ensure that you are not accidentally forwarding props that were intended only for the parent component. See common fixes for this problem below.
-
-2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
-
-3. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. React will allow you to pass it without a warning if you write the attribute name lowercase.
-
-4. You are using a React component without an upper case, for example `<myButton />`. React interprets it as a DOM tag because React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags. For your own React components, use PascalCase. For example, write `<MyButton />` instead of `<myButton />`.
-
----
-
-If you get this warning because you pass props like `{...props}`, your parent component needs to "consume" any prop that is intended for the parent component and not intended for the child component. Example:
-
-**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
-
-```js
-function MyDiv(props) {
-  if (props.layout === 'horizontal') {
-    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
-    return <div {...props} style={getHorizontalStyle()} />
-  } else {
-    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
-    return <div {...props} style={getVerticalStyle()} />
-  }
-}
-```
-
-**Good:** The spread syntax can be used to pull variables off props, and put the remaining props into a variable.
-
-```js
-function MyDiv(props) {
-  const { layout, ...rest } = props
-  if (layout === 'horizontal') {
-    return <div {...rest} style={getHorizontalStyle()} />
-  } else {
-    return <div {...rest} style={getVerticalStyle()} />
-  }
-}
-```
-
-**Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable.
-
-```js
-function MyDiv(props) {
-  const divProps = Object.assign({}, props);
-  delete divProps.layout;
-
-  if (props.layout === 'horizontal') {
-    return <div {...divProps} style={getHorizontalStyle()} />
-  } else {
-    return <div {...divProps} style={getVerticalStyle()} />
-  }
-}
-```
+---
+title: Unknown Prop Warning
+---
+
+The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
+
+There are a couple of likely reasons this warning could be appearing:
+
+1. Are you using `{...props}` or `cloneElement(element, props)`? When copying props to a child component, you should ensure that you are not accidentally forwarding props that were intended only for the parent component. See common fixes for this problem below.
+
+2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
+
+3. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. React will allow you to pass it without a warning if you write the attribute name lowercase.
+
+4. You are using a React component without an upper case, for example `<myButton />`. React interprets it as a DOM tag because React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags. For your own React components, use PascalCase. For example, write `<MyButton />` instead of `<myButton />`.## Valid DOM Nesting
+
+React validates proper DOM element nesting according to HTML specifications. As of React [VERSION], the following nesting patterns are supported:
+
+- Inside `<select>` elements:
+  - `<option>` and `<optgroup>` for select options
+  - `<hr>` for visual separation
+  - `<script>` and `<template>` for dynamic content and templating
+  - Text nodes
+
+Invalid nesting patterns will trigger warnings in development mode to help catch potential issues early.4. You are using a React component without an upper case, for example `<myButton />`. React interprets it as a DOM tag because React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags. For your own React components, use PascalCase. For example, write `<MyButton />` instead of `<myButton />`.## Valid DOM Nesting
+
+React validates proper DOM element nesting according to HTML specifications. As of React [VERSION], the following nesting patterns are supported:
+
+- Inside `<select>` elements:
+  - `<option>` and `<optgroup>` for select options
+  - `<hr>` for visual separation
+  - `<script>` and `<template>` for dynamic content and templating
+  - Text nodes
+
+Invalid nesting patterns will trigger warnings in development mode to help catch potential issues early.
+
+Note: When working with `<select>` elements, React now supports including `<script>` and `<template>` tags as children, in addition to the standard `<option>`, `<optgroup>`, and text nodes. This follows HTML spec updates for valid DOM nesting rules. For example:
+
+```jsx
+<select>
+  <script>/* ... */</script>
+  <template>/* ... */</template>
+  <option>Choice 1</option>
+  <option>Choice 2</option>
+</select>
+```
+
+---
+
+If you get this warning because you pass props like `{...props}`, your parent component needs to "consume" any prop that is intended for the parent component and not intended for the child component. Example:
+
+**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
+
+```js
+function MyDiv(props) {
+  if (props.layout === 'horizontal') {
+    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
+    return <div {...props} style={getHorizontalStyle()} />
+  } else {
+    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
+    return <div {...props} style={getVerticalStyle()} />
+  }
+}
+```
+
+**Good:** The spread syntax can be used to pull variables off props, and put the remaining props into a variable.
+
+```js
+function MyDiv(props) {
+  const { layout, ...rest } = props
+  if (layout === 'horizontal') {
+    return <div {...rest} style={getHorizontalStyle()} />
+  } else {
+    return <div {...rest} style={getVerticalStyle()} />
+  }
+}
+```
+
+**Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable.
+
+```js
+function MyDiv(props) {
+  const divProps = Object.assign({}, props);
+  delete divProps.layout;
+
+  if (props.layout === 'horizontal') {
+    return <div {...divProps} style={getHorizontalStyle()} />
+  } else {
+    return <div {...divProps} style={getVerticalStyle()} />
+  }
+}
+```