<span> cannot appear as a child of <select> in react

Question

I have created a select dropdown component, which I am using in a redux-form in a react-redux app. The dropdown works great, and I have no impact to performance, but in the browser I receive the following warning.

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

I am not sure why I recieve this error, as I am not passing in any <span> elements. Here is the code I am using to create the select dropdown (options is an array of object that contains each option's 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 would be receiving this warning, and how I can rectify this. I am using react 0.14.3

Answer 1

It seems that some extra spaces in your jsx syntax have created a span. I've tested your code, and after a correct re-indentation the error disappeared.

Before with the error: https://jsfiddle.net/snahedis/69z2wepo/28561/

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