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 ` + + + + +``` + +--- + +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
understands. + return
+ } else { + // BAD! Because you know for sure "layout" is not a prop that
understands. + return
+ } +} +``` + +**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
+ } else { + return
+ } +} +``` + +**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
+ } else { + return
+ } +} +```