React-devtools: Multiple <option> children causes TypeError: Cannot read property 'props' of undefined

[mik01aj]

When I open react-devtools, I see this:

After clicking the button, it fails with this error:

I tried closing the tab and opening everything again, but the problem persists.

My page uses React 0.14-rc1. I tried react-devtools on another page that uses react 0.13 and it works fine (in spite of the warning about version).

[mik01aj]

Possible cause, although weird, might be that react-headroom (which I use on the page) doesn't work with React 0.14-rc1.

Still, I would expect at least some meaningful error message in react-devtools.

EDIT: after removing react-headroom, the problem still persists :(

I use react-devtools 0.14.

[mik01aj]

I just discovered this does not happen only for my app. I get the same error on https://react-bootstrap.github.io/components.html.

[jaredly]

Oh! Are you using stateless function components? That might be the issue

[mik01aj]

You mean the old form from React 0.12? I don't. But maybe react-bootstrap does.

[mrm007]

@mik01aj stateless components is a new feature from React 0.14

@jaredly I get the same error, and I'm using stateless functional components

[joelburget]

I just got the same error, but with React 0.13.3, so obviously no stateless components. Possibly useful stack trace: https://gist.github.com/joelburget/02e94bae85aa75b60e58

[kuy]

The error is occurred In backend/getData.js file at line 43

      } else if (element._renderedChildren) {
        children = childrenList(element._renderedChildren);
      } else if (element._currentElement.props) {             <=== ERROR
        // This is a native node without rendered children -- meaning the children
        // prop is just a string.
        children = element._currentElement.props.children;
      }

When I put a breakpoint here, element parameter is plain String object.
I guess this mean that the caller of getData() function passes it as DOM text node.

Please see following two snippets.

NOT WORK

              <select defaultValue={level} onChange={e => onChangeLevel(e.target.value)}>
                {_.range(LEVELS).map(n =>
                  <option key={n} value={n}>
                    Level {n + 1}
                  </option>
                )}
              </select>

WORK

              <select defaultValue={level} onChange={e => onChangeLevel(e.target.value)}>
                {_.range(LEVELS).map(n =>
                  <option key={n} value={n}>
                    <span>Level {n + 1}</span>
                  </option>
                )}
              </select>

Finally, getData() function should handle DOM text node correctly.

[kuy]

Forgot to write my environment.

• Mac OS X 10.10.5
• Chrome 46.0.2490.86 (64-bit)
• Firefox Developer Edition (44a2...?)
• React 0.14.2 + Redux 3.0.4

[mik01aj]

Whoa, this looks really weird. Why does the additional <span> change anything?... :dizzy_face:

[kassens]

This is a great pointer. option is a special case in React: https://github.com/facebook/react/blob/master/src/renderers/dom/client/wrappers/ReactDOMOption.js#L74

[kuy]

I attempt to fix this issue on bugs/fix-248 branch on my forked repo. Please check diff.
Since getData() function receives a String object as element parameter, now it handles them as text nodes.
Please comment on this, because I don't know this is a right way :smiley:

Note: If a sequence of text nodes can be merged to one node, it looks good.

[mik01aj]

Great job, @kuy! :+1: I would test it on my page, but I don't know how to install the forked version. Maybe just someone could check it it doesn't break on https://react-bootstrap.github.io/components.html?

[goodwink]

This seems to work on the page I was having this same problem with. :+1:

[kassens]

@spicyj, @jimfb: This is caused by the way ReactDOMOption implements getNativeProps to have a custom flatten for children (only text or numbers). Do you see a way to re-use some of the ReactDOMComponent magic to normalize the props here?

[sophiebits]

Not offhand. Maybe better to not try to correlate .props.children with ._renderedChildren.

[adampatterson]

@kuy Putting my{values} in a span tag inside the option tag fixed the issue for me.

Thanks! I wasted a lot of time on this.

[manuscript80]

Weird, I tried to use a <span> tag inside my <option> tag and I got this warning message "Warning: Only strings and numbers are supported as <option> children."

I'm facing the same problem described above. Any idea when this fix will be merged?

[pizzarob]

@manuscript80 i wouldn't worry about wrapping your stuff in a span within an option. This is a bug with react-devtools not your code. But yes, the error is unsightly and not having access to the dev tools is not helpful either.

EDIT:

I don't know if this would help you, but concatenating my string variables and putting only one variable within the option tags worked to fix.

const RosterOption = (props) => {
    let name = `${props.item.firstName} ${props.item.lastName}`;
    return (
        <option value={`${props.item.firstName}-${props.item.lastName}`}>
            {name}
        </option>
        );
};