<span> cannot be displayed as a child of a <select> in a reaction

Question

I created a drop-down component that I use in the form of redux in a response-redux application. The dropdown menu works fine and I do not affect performance, but in the browser I get the following warning.

Warning: validateDOMNesting(...): <span> cannot appear as a child of <select>.

I am not sure why I am getting this error as I am not passing any <span> elements. Here is the code that I use to create a select drop-down list (options is an array of an object that contains all the option attributes. Option.text is a string value that will be viewed by the user, so it could be something like "Option 1" , or "Option 2".)

 return ( <select {...other}> <option /> { options.map((option) => { return <option key={option.value} value={option.value}>{option.text}</option> }) } </select> ) 

Any ideas on why I am getting this warning, and how I can fix it. I am using reaction 0.14.3

Answer 1

It seems that some additional spaces in the jsx syntax have created a span . I checked your code, and after re-entering it correctly, the error went away.

Before that, with an error: https://jsfiddle.net/snahedis/69z2wepo/28561/

And after re-entering: https://jsfiddle.net/snahedis/69z2wepo/28564/

Answer 2

You have a problem with variable overriding. Your map function parameter is called an “option,” so when you write <option> , the reaction will try to process the object indicated by the option variable as a reaction class. Try this instead -

 return ( <select {...other}> <option /> { options.map((optionNode) => { return <option key={optionNode.value} value={optionNode.value}>{optionNode.text}</option> }) } </select> )