React High Level Component doesn't update when used more than once

Question

I was looking for a solution to use a re-usable model dialog window, but where I have freedom of content, and came to the High-Level Component pattern in React. As described here: https://stackoverflow.com/a/31564812.

While this initially seems to work, I am running into trouble when I use one wrapper to wrap different things (at different times).

First I do:

function Dialog(Component) {
    return React.createClass({
        render: function() {
            return ( 
                <div className="wrapper"> 
                    before 
                    <Component {...this.props}/>
                    after
                </div>
            );
        }    
    });
};

module.exports = Dialog;

And then I do:

var Dialog = require('./Dialog.jsx');
DialogContent = React.createClass({
    render: function () {
      return ( 
        <div> blah blah this is for login</div>
      )
    };
};                                      
var LoginDialogWindow = new Dialog(DialogContent);
module.exports = LoginDialogWindow;

And

 var Dialog = require('./Dialog.jsx');
 OtherContent = React.createClass({
        render: function () {
          return ( 
            <div>Jo Jo, this is something else</div>
          )
      };
  };                                      
  var OtherDialogWindow = new Dialog(OtherContent);
  module.exports = OtherDialogWindow;

Then what I get is that these two components share their state. When one is defined the other will show the same text as the first. Wen I call a function on one, the function appears be called on the other as well. What I see is that when I open one flavor of dialog window, both flavors appear.

I'm guessing it has something to do with JavaScript closures, but am at a loss of how to approach this. How do I use these separately?

score 1 · Answer 1 · answered Sep 29 '15 at 01:25

1

Drop the new keyword from your LoginDialogWindow and OtherDialogWindow calls. new is for creating instances of an object that has a constructor function, which is not what you want here.

answered Sep 29 '15 at 01:25

Mark McKelvy

3,328
2
19
24

Thanks! I tried it but it doesn't seem to make a difference. – dhr_p Sep 29 '15 at 01:53

score 0 · Answer 2 · answered Sep 29 '15 at 02:07

0

Ok. I found the solution. It has something to do not with this inheritance at all, but rather with an EventManager that submitted events to which all instances listened (duh!). So, for those looking for a flexible (and working) react dialog window, you should be able to find it here. (although most credits go to minutemailer)

answered Sep 29 '15 at 02:07

dhr_p

2,364
1
22
19

Dammit! I was wrong. The showing up multiple times was caused by this, but the fact that a second instance of the component will show the same content is in fact caused by this inheretance somehow. Dropping the 'new' doesn't help. – dhr_p Sep 30 '15 at 23:49

React High Level Component doesn't update when used more than once

2 Answers2