How to make simple form more React-like? (DOM node goes missing)

Question

I am converting a little HTML/JS form I did years ago, as a React.js learning exercise, and I have run into a stumbling block which I'd like to understand the reason for.

Basically, as it originally was, I had a select, where you could choose which form you wanted to display. The onchange handler for the select displayed the chosen form and hid the others. So my first step in doing a React makeover of this, which has worked fine, is to make the forms into React components. I am left with this as my HTML:

<body>
    <div id="main">
        <select id="calculations" onChange="handleSelect();">
            <option value="" selected="selected">SELECT CALCULATION FORM</option>
            <option value="1">Enter pace and distance to get a total time</option>
            <option value="2">Enter distance and target time to get the required pace</option>
            <option value="3">Enter pace and time to get the distance run</option>
            <option value="4">Convert mph to mins/mile</option>
            <option value="5">Convert mins/mile to mph</option>
        </select>

        <div id="calcForm"/>

    </div>

</body>

This is the JS:

window.handleSelect=function(){
    var selected=$("#calculations").val();
    if(selected!=""){
        React.render(React.createElement(CalcForm, {selected: selected, distances: distances}),document.getElementById('calcForm'));
    } else {
        $("#calcForm").html("");//clear it
    }
};

I have been frustrated, though, in my attempts to finish the job off my making the main select into a React component. I tried creating a SelectCalc component and using it like this:

<body>
    <div id="main">

        <div id="selectCalc"/>  
        <div id="calcForm"/>

    </div>

</body>

In my app.js I had this:

React.render(React.createElement(SelectCalc,null), document.getElementById('selectCalc'));

I made the handleSelect a function of the SelectCalc class, so that when an option was selected, it called this:

React.render(React.createElement(CalcForm, {selected: selected, distances: distances}),document.getElementById('calcForm'));

Here is where the problem came in, though. When done this way, when I select an option I get the error:

Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

The target container in question is the 'calcForm' div, as identified in document.getElementById('calcForm'). For reasons which baffle me, this is null (I checked in the console). And yet it is clearly there in the HTML, and it was successfully targeted by my more primitive select change handler, prior to the React makeover.

So what is the issue? What am I misunderstanding here? Given that this is such a very simple example of React.js at work, how should I be doing it?

Fiddle of non-working version at https://jsfiddle.net/JohnMoore/7rp3n1oy/2/, I hope - first ever use of Fiddle (!), so I hope it shows the issue. Try running it and selecting one of the options and see the error in the console. There is also a preceding error, I notice, on JSFiddle: "SyntaxError: expected expression, got '<'". I have to say this doesn't make much sense to me, as I would have thought what was expected in the return from the render was, precisely, some HTML beginning with <. I don't know whether this is related or whether it's an artefact of the Fiddle environment.

can you put your code into a [fiddle](https://jsfiddle.net/marcelortega/05szLzLt/), pls? — marcel, Jun 17 '15 at 09:43
I've added a fiddle as requested, at https://jsfiddle.net/JohnMoore/7rp3n1oy/ — John Moore, Jun 17 '15 at 11:52
you are using some undefined methods. but there are no errors when selecting an option. [Here](https://jsfiddle.net/7rp3n1oy/1/) i fixed some methods. — marcel, Jun 17 '15 at 12:22
Thanks for that. But unfortunately, the reason you didn't see any errors was that I had somehow lost the changes I had entered into JSFiddle so what you were seeing was the working version! I hope the new version at https://jsfiddle.net/JohnMoore/7rp3n1oy/2/ shows the problem properly. I'll take a look at your fixes anyway, as there's no doubt much I can learn from them. — John Moore, Jun 17 '15 at 14:31

score 2 · Accepted Answer · edited May 23 '17 at 12:25

2

i solved it by removing the divs. They will be create dynamically in the react component.

Here is the fiddle.

EDIT: The old one did not work because <div id="selectCalc" /> is "invalid" html. it will be replaced with <div id="selectCalc"> instead of <div id="selectCalc"></div>. And because there is a missing end-tag, the browser ignores everthing after the <div ... />. -> <div id="calcForm" /> won't appear in the DOM.

Here is a version with the corrected html tags, but you should prefer the other version.

Take a look at this for more information about in/valid html tags.

edited May 23 '17 at 12:25

Community

1
1

answered Jun 17 '15 at 15:38

marcel

2,967
1
16
25

Very interesting and helpful, marcel. Thanks! It makes sense, of course, that the div would be recognised if it were created within the react component. Can you explain, though, why it was not being recognised successfully before? Is it something to do with scope which I'm not understanding, perhaps? – John Moore Jun 18 '15 at 11:35
Wow, that information about the invalid html is, to me, very surprising, and I have to say, rather puzzling. According to https://facebook.github.io/react/tips/self-closing-tag.html, `
` is OK. But you're quite right, if I change that to `
`, it works, when it does not as `
`. And yet, the other div, `
` works fine in its self-closing form. – John Moore Jun 18 '15 at 13:34
Yes, that works with `
` because it will be converted to `
` and the browser will append the closing tag automatically at the end. When you put an other self-closing-div behind `
` it won't appear in the DOM. BTW: Could you accept my answer pls?! ;-)
– marcel Jun 18 '15 at 13:59

How to make simple form more React-like? (DOM node goes missing)

1 Answers1