0

I have a parent ReactJS application, also I have placeholder for reactjs widget from another application. This causes Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid' . How do i fix this? Is there way to set the starting sequence for data-reactid ?

--index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/build/stylesheet/main.css">
    <script src="/build/javascript/app.js" type="text/javascript" charset="utf-8" defer></script>
    <script src="http://localhost:58/build/javascript/Modal.js" type="text/javascript" charset="utf-8" defer></script>
</head>
<body>

</body>
</html>

--app.js

var React = require('react');
var Wrapper = require("./components/Wrapper.react.js");

React.render(<Wrapper/>,document.getElementsByTagName('body')[0]);

Wrapper element is just the beginning but it is more deep.

Now the external file from my another server. Which i can change.

--Modal.js (from another server)

document.body.innerHTML+="<div class='p-modal p-fade p-save-modal'></div>";

var React = require('react');
var Modal= require('./components/SaveModal.react');
React.render(
    <oa/>,
    document.querySelector(".p-save-modal")
);

Here I am appending the element to the body and loading React component inside it.

codeguy
  • 51
  • 1
  • 1
  • 6
  • 3
    This is not a question of sequence, I got this problem myself. This is due to the way you render things. Unfortunately I can't help you if you don't post more code. – François Richard Jul 06 '15 at 15:57
  • I have editted the question with the code. Let me know if it needs to be more descriptive – codeguy Jul 07 '15 at 12:02

1 Answers1

0

Don't use innerHTML.

render your div the normal way

React.render(<div class='p-modal p-fade p-save-modal'></div>, //your body or whatever)

React is using a virtual DOM if you are trying to change the DOM directly you'll have some problems.

Hope it helps.

François Richard
  • 6,817
  • 10
  • 43
  • 78
  • There is no way to append HTML in react. app.js already renders inside body. If modal.js renders inside body then the previous rendered element is removed. – codeguy Jul 07 '15 at 16:42