[React]hookで配列を管理しているが、mapが使えない

Question

前提・実現したいこと

hookを使って配列を管理しているが、アクセスできるはずなのにmapが使えません。
別のやり方があるのでしょうか。
わかる方がいましたらコメントお願いします。

発生している問題・エラーメッセージ

Uncaught TypeError: personNames.map is not a function

該当のソースコード

const [personNames, setPersonNames] = ['A', 'B', 'C'];

return (
    <div className={classes.parent}>

      <Grid container className={classes.root_} spacing={2}>
        //省略
                <div className={classes.chipGroup}>
                  {personNames.map((name, index) =>　//該当箇所
                    <Chip
                     
                      onClick={handleClick(name)}
                      onDelete={handleDelete(index)}
                      
                    />)}
                </div>
              </Paper>
            </Grid>
     
         
      </Grid>
    </div>
  );

Answer 1

うまくHooksが設定できていないようです。

ここを

const [personNames, setPersonNames] = ['A', 'B', 'C'];

こう書き換えましょう

const [personNames, setPersonNames] = useState(['A', 'B', 'C']);

詳しい使い方はwebサイトに載っています。

https://ja.reactjs.org/docs/hooks-state.html

Comments

[aiai8976]

すみません凡ミスでした。
ありがとうございました。