JavaScriptのオブジェクトのプロパティについて

Question

引用テキスト###JavaScriptのオブジェクトのプロパティについて

programming初心者で、Javascriptのオブジェクトのプロパティについてわからない部分があります。

mapを使用して<input>要素のvalueにそれぞれ別のstateを使用し、onChangeで変更させたいと思い、色々試しましたが上手くいかず、
<input>のvalueをexpenses[index]として上手くいきましたが、expensesのプロパティにindexがなく、expenses[index]がどうゆう仕組みかよくわかりません。オブジェクトについて色々調べましたがわかりませんでした、よろしくお願いします

該当のソースコード

import {db} from '../firebase'
import firebase from 'firebase'

const checklists=["住居費","水道光熱費","通信費","保険料","食費","日用品費","被服費","美容費","趣味費","交通費","教育費","医療費","雑費"]

const CheckboxList:React.FC=()=>{
  const [categories,setCategories]=useState<any>({})
  const [expenses,setExpenses]=useState<any>({})
  const handleChange=(e:React.ChangeEvent<HTMLInputElement>)=>{
    setCategories({
      ...categories,[e.target.id]:e.target.checked
    })
    console.log(categories)
    console.log(expenses)
  }
  const handleSubmit=(e:React.FormEvent<HTMLFormElement>)=>{
    e.preventDefault();
    db.collection("posts").doc().collection("expenses").add({
      expenses,
      timestamp:firebase.firestore.FieldValue.serverTimestamp(),
    });
    setExpenses({});
  }
  return (
    <>
      <div className="container">
        <div className="hab-list"></div>
        <div className="chart-form">
          <form onSubmit={handleSubmit}>
            {checklists.map((item,index)=>{return(
              <div key={index}>
              <label htmlFor={`${index}`} >
                <input
                  id={`${index}`}
                  name="inputNames"
                  type="checkbox"
                  value={item}
                  checked={categories[item]}
                  onChange={handleChange}/>
                {item}
              </label>
              {categories[index]==true&&
              <label >
                  <input
                    type="text"
                    name="expense"
                    id="expense"
                    value={expenses[index]}
                    onChange={e=>setExpenses({...expenses,[item]:e.target.value})}
                  />
                円
              </label>}
              </div>
            )})}
            <button type="submit"></button>
          </form>
        </div>
      </div>
    </>
  );
};

export default CheckboxList;
コード
```

### 結果

![![イメージ説明](8042f2e6732acb9bc9c500756c7d363b.png)](08d6a56d14c8abb7aeb01f388d294c8c.png)
### 補足情報（FW/ツールのバージョンなど）

Comments

[maisumakun]

「expensesにindexはない」とはどういう意味でしょうか？

[yambejp]

reactならreactタグをつけたほうがよいでしょう

[daaaiki]

初期値の設定にexpensesを使用したく、expensesのプロパティに[index]を指定しても[index]は無く何を参照しているのかわからないという意味です。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

expensesのプロパティにindexがなく、expenses[index]がどうゆう仕組みかよくわかりません。

JavaScriptのオブジェクトは、以下のような特徴を持ちます。

• 存在しないプロパティにアクセスしてもエラーにはならず、undefinedという値が取れる
• プロパティ形式のアクセスと添字アクセス、たとえばfoo.barとfoo['bar']は同じ意味になる
• オブジェクトのプロパティリストは固定されておらず、自由に書き込んで新しいプロパティを作れる

Comments

[daaaiki]

回答ありがとうございます！納得しました!