React×TypeScriptでSelect要素から取得した値が数値になってしまう

Question

Reactでドロップダウン選択を実装しています。

console.log(formData)でオブジェクトの中身を出力すると、
selectionの値が数値になっています。
画像は、'お問い合わせ内容3'を選択したパターンです。
こちらをlabelプロパティの'お問い合わせ内容1'のように出力させるようにしたいです。
そもそもなぜ数値が出力されるのかが不明でして、ご教示いただければと思います。

// Settings > ContactSelect.tsx
const SelectList = {
  list: [
    { value: 'inquiry1', label: 'お問い合わせ内容1' },
    { value: 'inquiry2', label: 'お問い合わせ内容2' },
    { value: 'inquiry3', label: 'お問い合わせ内容3' },
  ]
}

export default SelectList;

// Components > Form.tsx
export function FormSelect(props: any) {
  let classNames = 'form-control ';
  if (props.className !== undefined){
      classNames += props.className;
  }

  return (
    <select {...props} className={classNames}>
      <option hidden>{props.hiddenlabel}</option>
      {props.options?.map((option: string, index: number) => {
        return <option value={index+1} key={index}>{option}</option>
      })}
    </select>
  )
}

export default {};

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { FormSelect } from '../Components';

function ContactNew(props: any) {
  function handleContactNew() {
    console.log(formData)
  }

  type FormData = {
    nickname :string,
    email: string,
    content: string,
    selection: string,
  }

  const [ formData, setFormData ] = useState<FormData>({
    nickname: '',
    email: '',
    content: '',
    selection: '',
  })

   const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.persist();
    const { name, value } = e.target
    setFormData({ ...formData, [name]: value })
  }


  return (
    <>
     // 略　nickname, email, content入力欄は省略
     <FormSelect className='select' style={{ marginBottom: "20px"}} id="selection" name="selection" type='selectbox'
       hiddenlabel='選択してください' 
       options={SelectList.list.map((option, key) => (
         <>
           <option value={option.value} key={key}>{option.label}</option>
         </>
       ))}
       onChange={onChangeHandler} value={formData.selection}
     />
     <FormSubmit onClick={handleContactNew} />
    </>
  )
}

export default ContactNew;

Comments

[k_a]

`FormSelect`コンポーネントが何を参照しているのかわかりませんが、そのコンポーネントの実装が間違っているのではないでしょうか？

[CSHky130]

FormSelectコンポーネントの定義ファイルを見落としていたので、そこを見てみます。

[k_a]

`<option value={index + 1} key={index}>`
明らかにここが原因ですね

[CSHky130]

そうですね、value属性にインデックス番号を指定していました。
ありがとうございます。

Answer 1

FormSelectコンポーネントに原因がありました。

<option value={index+1} key={index}>{option}</option>

value=[index+1]でインデックス番号が表示されるようになっていたので
そこを修正、ないしは削除することで解決できました。