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!

change `carType.map((filingType, key)` to `carTypes.map((filingType, key)` — A.R.SEIF, Nov 13 '20 at 12:13
You just misspelled . You did put carType wich is an array instead of filingType — Odinn, Nov 13 '20 at 12:14
Sorry some typos @A.R.SEIF - all fixed now so hopefully clearer — Neil Kelsey, Nov 13 '20 at 12:17
Sorry some typos @DarthJS - all fixed now so hopefully clearer — Neil Kelsey, Nov 13 '20 at 12:18

score 1 · Answer 1 · answered Nov 13 '20 at 12:41

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

score 0 · Answer 2 · answered Nov 13 '20 at 13:13

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>
    )

React 16 upgrade - select lists return Object Object

2 Answers2