useStateを使用して、複数のボタンから選手を指定して、好みの打順を作れるようにしたいです。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

エラーは出てません。

該当のソースコード

React.js
1import React, { useState } from 'react';
2import Button from '@mui/material/Button';
3import Paper from '@mui/material/Paper';
4
5const Chooseplayer = (props) => {
6    const [player1,setPlayer1] = useState('');
7
8    const [player2,setPlayer2] = useState('');
9
10    const [player3,setPlayer3] = useState('');
11
12
13    const members = [{player1},{player2},{player3}];
14
15    return(
16        <div>
17            <h1 style={{justifyContent:'space-between',display:'flex',maxWidth:'40%',paddingLeft:100}}>
18                １番：
19                <Paper elevation={3} style={{height:50,width: 400,textAlign:'center'}}>
20                    {player1}
21                </Paper>
22            <Button variant="outlined"　onClick={() => setPlayer1('')}>削除</Button>
23            </h1>
24            <h1 style={{justifyContent:'space-between',display:'flex',maxWidth:'40%',paddingLeft:100}}>
25                ２番：
26                <Paper elevation={3} style={{height:50,width: 400,textAlign:'center'}}>
27                    {player2}
28                </Paper>
29            <Button variant="outlined"　onClick={() => setPlayer2('')}>削除</Button>
30            </h1>
31            <h1 style={{justifyContent:'space-between',display:'flex',maxWidth:'40%',paddingLeft:100}}>
32                ３番：
33                <Paper elevation={3} style={{height:50,width: 400,textAlign:'center'}}>
34                    {player3}
35                </Paper>
36            <Button variant="outlined"　onClick={() => setPlayer3('')}>削除</Button>
37            </h1>
38            <h1 style={{justifyContent:'space-between',display:'flex',maxWidth:'40%',paddingLeft:100}}>
39                ４番：
40                <Paper elevation={3} style={{height:50,width: 400,textAlign:'center'}}>
41                    {player1}
42                </Paper>
43            <Button variant="outlined"　onClick={() => setPlayer1('')}>削除</Button>
44            </h1>
45            <h1 style={{justifyContent:'space-between',display:'flex',maxWidth:'40%',paddingLeft:100}}>
46                ５番：
47                <Paper elevation={3} style={{height:50,width: 400,textAlign:'center'}}>
48                    {player1}
49                </Paper>
50            <Button variant="outlined"　onClick={() => setPlayer1('')}>削除</Button>
51            </h1>
52            <h1 style={{justifyContent:'space-between',display:'flex',maxWidth:'40%',paddingLeft:100}}>
53                ６番：
54                <Paper elevation={3} style={{height:50,width: 400,textAlign:'center'}}>
55                    {player1}
56                </Paper>
57            <Button variant="outlined"　onClick={() => setPlayer1('')}>削除</Button>
58            </h1>
59            <h1 style={{justifyContent:'space-between',display:'flex',maxWidth:'40%',paddingLeft:100}}>
60                ７番：
61                <Paper elevation={3} style={{height:50,width: 400,textAlign:'center'}}>
62                    {player1}
63                </Paper>
64            <Button variant="outlined"　onClick={() => setPlayer1('')}>削除</Button>
65            </h1>
66            <h1 style={{justifyContent:'space-between',display:'flex',maxWidth:'40%',paddingLeft:100}}>
67                ８番：
68                <Paper elevation={3} style={{height:50,width: 400,textAlign:'center'}}>
69                    {player1}
70                </Paper>
71            <Button variant="outlined"　onClick={() => setPlayer1('')}>削除</Button>
72            </h1>
73            <h1 style={{justifyContent:'space-between',display:'flex',maxWidth:'40%',paddingLeft:100}}>
74                ９番：
75                <Paper elevation={3} style={{height:50,width: 400,textAlign:'center'}}>
76                    {player1}
77                </Paper>
78            <Button variant="outlined"　onClick={() => setPlayer1('')}>削除</Button>
79            </h1>
80            <Button variant="outlined"　onClick={() => setPlayer1('大谷　翔平')}>大谷　翔平</Button>
81            <Button variant="outlined"　onClick={() => setPlayer2('前田　健太')}>前田　健太</Button>
82            <Button variant="outlined"　onClick={() => setPlayer3('ダルビッシュ　有')}>ダルビッシュ　有</Button>
83            <Button variant="outlined"　onClick={() => setPlayer3('ダルビッシュ　有')}>実行</Button>
84        </div>
85    );
86}
87
88export default Chooseplayer;

試したこと

useeffectを使用？するのが良いと出てきましたが、導入のやり方がわかりませんでした。

補足情報（FW/ツールのバージョンなど）

ボタンなどのデザインは、マテリアルUI を使用しています。

maisumakun

2021/11/08 08:29

「現状で正常に動いている」ものを「useeffectを使用」する形に書き換えたい、という状況でしょうか？それとも、「現状の動作に問題がある」状況でしょうか？

taki2021

2021/11/08 23:02 編集

返信ありがとうございます。理想では、ボタンを押した順番にリストに入れて、そのリストをmapを使って出力したいです。現状は、ボタンを押した順番にリストに代入する方法がわからず、useeffectを使用すればよいのか、考えている状態です。言葉足らずで申し訳ありません。

p19ljk

2021/11/12 04:49

ご自身が困っている根本原因がわかっていますか？やりたいことができないというだけでは丸投げになってしまいます。まず作りたいものは、player1〜9と様々な選手のボタンを用意して、playerに選手の名前をセットしていきたいということですよね？では、まずはplayer1のみに絞って、選手ボタンを押すとplayer1に対応する選手名が入るというものを作ってみてください。そこで何かしら問題にぶつかればそれを質問してみてください。