React 16 upgrade - select lists return Object Object

Question

I've got an app I'm upgrading from React 15 to React 16

In some instances of mapping and using a select list which were working in React 15 are now not working - I'm finding that the select list are returning a list of [object, Object]

Here's my code

  let carTypes = ["ford", "volvo", "tesla", "BMW"];

  return (
        <div>
          <select>
            {carTypes.map((carType, key) => {
              return (
                <option
                  key={key}
                >
                  <span>{carType}</span>
                </option>)
            })}
          </select>

          <ul>
            {carTypes.map((carType, key) => {
              return (
                <li
                  key={key}
                >
                  <span>{carType}</span>
                </li>)
            })}
          </ul>
        </div>
    )

So in the above code the select list will render in the browser a select list with 4 options - all of them read [object, Object]

The below unordered list returns the 4 items and renders them correctly in the browser displaying the 4 car types

My guess was that select lists mark up has changed in React 16 but I've found no documentation of that

If anyone can point me in the right direction / advice or show me some documentation that would be great!

Answer 1

i wrote this code .

let carTypes = ["ford", "volvo", "tesla", "BMW"];

  return (
    <div>
      <select>
        {carTypes.map((carType, key) => {
          return <option key={key}>{carType}</option>;
        })}
      </select>

      <ul>
        {carTypes.map((carType, key) => {
          return (
            <li key={key}>
              <span>{carType}</span>
            </li>
          );
        })}
      </ul>
    </div>
  );

Work Demo

Answer 2

Remove span tag from option tag

let carTypes = ["ford", "volvo", "tesla", "BMW"];

    return (
        <div>
            <select>
                {carTypes.map((carType,key) => {
                    return (
                        <option
                           key={key}
                        >
                            {carType}
                        </option>)
                })}
            </select>

            <ul>
                {carTypes.map((carType, key) => {
                    return (
                        <li
                            key={key}
                        >
                            <span>{carType}</span>
                        </li>)
                })}
            </ul>
        </div>
    )