Moving a DOM element item out of a react js component

I have a react component that uploads files asynchronously. After files are uploaded, their ID from the server is stored in a hidden field and saved as part of another form. This component is rendered inside the form that saves the IDs. I can not use the Javascript File API because of IE support.

I have this functionality working in JQuery but I'm trying to convert it to react. Once a file is selected, I need to move the file input field to another form outside of the current form so that it can be uploaded. My react component contains this file input field and onChange I use jQuery to move it. After I move it, I update my state so that my render method will be called again. When it is called, it does not render the file input field. My expectation is that it will see that the file input field is not where the render method puts it and create a new one.

I realize this probably isn't the react way to do things - any input or suggestions would be great. Thanks.

React isn't going to notice someone else modifying the DOM. When you call setState another render is triggered. The result of the render is added to the Virtual DOM, and diffed against the previous Virtual DOM. The real DOM never enters the equation.

You could just clone the input[file] with jQuery, instead of moving it.