React 繰り返し処理で表示したボタンの機能の振り分け
現在React/material uiで繰り返し処理を使ってリストを作成しています。
リストをボタンとして表示し、それぞれのonClickイベントの割り当てをどのようにしたらいいのか悩んでおります。
以下記載したリスト生成のコードです。
Home.jsx
<List >
{NaviContents.map((str, index) => (
< ListItem key={str}>
<ListItemButton >
<ListItemIcon >
{NaviContentIcons[index]}
</ListItemIcon>
<ListItemText secondary={str} />
</ListItemButton>
</ListItem>
))}
</List>
SignOutButton.jsx
export const SignOutButton = () => {
const { setIsSignedIn, setCurrentUser } = useContext(AuthContext);
const history = useHistory();
const onClickSignOut = async () => {
const res = await signOut();
try {
if (res.status === 200) {
Cookies.remove("_access_token")
Cookies.remove("_client")
Cookies.remove("_uid")
history.push("/signin");
setCurrentUser();
setIsSignedIn(false);
}
} catch (e) {
console.log(e);
}
}
return <button onClick={onClickSignOut}>サインアウト</button>;
};
1、仮にこれで『ログイン、ログアウト、ホームへ戻る』ボタンのリストを作成したとすると、それぞれのイベントはどのように割り当てるのでしょうか？
2、サインアウトボタンを他で使用するため作成していましたが、これはサインアウト機能を持つボタンを返すコンポーネントなので、別で関数のみを定義しておく必要があるのでしょうか？
3、それぞれの機能のボタンコンポーネントを作成して、配列に入れておき、indexで使い分けるのが良いでしょうか？
初歩的な質問で、理解が浅く読みづらい内容となっているかと思いますが、ご教授いただければ幸いです。
0
