React: validateDOMNesting

[zhongning7924]

Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <form>. See CreateApps > form > ... > Connect(UploadBtn) > UploadBtn > Connect(resourceModal) > resourceModal > Connect(resource) > resource > form.


warning @ warning.js:45validateDOMNesting @ validateDOMNesting.js:345ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:457ReactReconciler.mountComponent @ ReactReconciler.js:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:225ReactCompositeComponent_mountComponent @ ReactPerf.js:66ReactReconciler.mountComponent @ ReactReconciler.js:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:225ReactCompositeComponent_mountComponent @ ReactPerf.js:66ReactReconciler.mountComponent @ ReactReconciler.js:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:225ReactCompositeComponent_mountComponent @ ReactPerf.js:66ReactReconciler.mountComponent @ ReactReconciler.js:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:479ReactReconciler.mountComponent @ ReactReconciler.js:37ReactCompositeComponentMixin._updateRenderedComponent @ ReactCompositeComponent.js:570ReactCompositeComponentMixin._performComponentUpdate @ ReactCompositeComponent.js:544ReactCompositeComponentMixin.updateComponent @ ReactCompositeComponent.js:473ReactCompositeComponent_updateComponent @ ReactPerf.js:66ReactCompositeComponentMixin.receiveComponent @ ReactCompositeComponent.js:405ReactReconciler.receiveComponent @ ReactReconciler.js:87ReactChildReconciler.updateChildren @ ReactChildReconciler.js:84ReactMultiChild.Mixin._reconcilerUpdateChildren @ ReactMultiChild.js:216ReactMultiChild.Mixin._updateChildren @ ReactMultiChild.js:351ReactMultiChild.Mixin.updateChildren @ ReactMultiChild.js:326ReactDOMComponent.Mixin._updateDOMChildren @ ReactDOMComponent.js:871ReactDOMComponent.Mixin.updateComponent @ ReactDOMComponent.js:700ReactDOMComponent.Mixin.receiveComponent @ ReactDOMComponent.js:645ReactReconciler.receiveComponent @ ReactReconciler.js:87ReactCompositeComponentMixin._updateRenderedComponent @ ReactCompositeComponent.js:562ReactCompositeComponentMixin._performComponentUpdate @ ReactCompositeComponent.js:544ReactCompositeComponentMixin.updateComponent @ ReactCompositeComponent.js:473ReactCompositeComponent_updateComponent @ ReactPerf.js:66ReactCompositeComponentMixin.receiveComponent @ ReactCompositeComponent.js:405ReactReconciler.receiveComponent @ ReactReconciler.js:87ReactCompositeComponentMixin._updateRenderedComponent @ ReactCompositeComponent.js:562ReactCompositeComponentMixin._performComponentUpdate @ ReactCompositeComponent.js:544ReactCompositeComponentMixin.updateComponent @ ReactCompositeComponent.js:473ReactCompositeComponent_updateComponent @ ReactPerf.js:66ReactCompositeComponentMixin.performUpdateIfNecessary @ ReactCompositeComponent.js:421ReactReconciler.performUpdateIfNecessary @ ReactReconciler.js:102runBatchedUpdates @ ReactUpdates.js:129Mixin.perform @ Transaction.js:136Mixin.perform @ Transaction.js:136assign.perform @ ReactUpdates.js:86flushBatchedUpdates @ ReactUpdates.js:147ReactUpdates_flushBatchedUpdates @ ReactPerf.js:66Mixin.closeAll @ Transaction.js:202Mixin.perform @ Transaction.js:149ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62batchedUpdates @ ReactUpdates.js:94ReactEventListener.dispatchEvent @ ReactEventListener.js:204

[gaearon]

Hi! We use this site as an issue tracker. If you believe this is a bug in React, you’d need to provide more details: what you expected, what you saw, show some code, and add some context around what you were trying to do. Just dumping a warning message isn’t very helpful.

In this case I believe the warning says everything you need to know:

<form> cannot appear as a descendant of <form>. See CreateApps > form > ... > Connect(UploadBtn) > UploadBtn > Connect(resourceModal) > resourceModal > Connect(resource) > resource > form.

You have a <form> in <CreateApps>, and then another one in <resource> below. Forms cannot be nested in HTML, so the browser replaces the markup, and this breaks React. The solution is to remove an extra form.

[zhongning7924]

Createapps has a form，it has a children component in the form ，the children is a upload component，when i click the upload，it will show detail ，another form component in the detail，so it has the warning。 i want to know how can i design the component and the warning disappear. If i ignore the warning，what problems will have?

[gaearon]

It is not valid HTML: http://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form

To solve it, remove either the parent form, or the child form. You can pass a prop to the child component telling it not to render the form. You also don't have to use the form element if you just need some inputs. You may render them directly.

If you ignore the warning there is a risk that it will render incorrectly in some browsers and potentially break React interaction on the page.

[zhongning7924]

thank you very much.

[andnew]

you declaration form for two times