【React】onClickで値を更新したいんですが、valueが読み取られず値が更新されません

プロフィールの文言変える実装してるのですが、onClick時にuseStateの値を更新したいのですが、valueが読み取られず値が更新されません。
なぜ更新されないのかご教授頂けると幸いです。

react
1type profile_message ={
2  message: string;
3  title:string;
4  open:boolean;
5  value:string;
6
7}
8
9const Profile:React.FC<profile_message> = () => {
10  const [message, setMessage] = useState(
11    "好きな食べ物は豚汁！\n趣味：筋トレ????・サウナ♨️・ランニング????‍♂️\n"
12  );
13  const [open, setOpen] = React.useState(false);
14
15  const handleOpen = () => {
16    setOpen(true);
17  };
18
19  const handleClose = () => {
20    setOpen(false);
21  };
22  const classes = useStyles();
23
24  
25
26
27
28  return (
29    <div className={styles.root_container}>
30      <div className={classes.root}>
31        <Avatar
32          alt="Remy Sharp"
33          src="/static/images/avatar/1.jpg"
34          className={classes.large}
35        />
36      </div>
37      <div className={styles.message_container}>
38        <div className={styles.name_title}>
39          <p>Oshikiri Fumiya</p>
40        </div>
41        
42          <p className={styles.message}>
43              {message.split('\n').map((str,index)=>(
44                   <React.Fragment key={index}>{str}<br /></React.Fragment>
45              ))}
46          </p>
47          <div className={styles.icons_container}>
48              <Tooltip title="Twitter"><a href="https://twitter.com/home" target="_blank"><IconButton><TwitterIcon style={{ fontSize: 30 }}/></IconButton></a></Tooltip>
49              <Tooltip title="GitHub"><a href="https://github.com/fumimoe" ><IconButton><GitHubIcon style={{ fontSize: 30 }}/></IconButton></a></Tooltip>
50              <Tooltip title="プロフィール編集"><IconButton onClick={handleOpen}><CreateIcon style={{ fontSize: 30 }}/></IconButton></Tooltip>
51          </div>
52      </div>
53      {open &&(
54        <Modal
55        open={open}
56        onClose={handleClose}
57        aria-labelledby="simple-modal-title"
58        aria-describedby="simple-modal-description"
59        className={styles.modal}
60        
61
62      >
63          <div className={styles.modal_container}>
64        <textarea className={styles.message_area} value={message} onChange={(e:React.ChangeEvent<HTMLTextAreaElement>) => (e.target.value)} name="message" cols={30} rows={5}>{message}</textarea>
65        <div className={styles.modal_button}>
66        <Button variant="contained" color="primary" onClick={() => setMessage(value)} >
67      変更する
68    </Button>
69    <Button variant="contained" color="primary" onClick={() => handleClose()}>
70    キャンセル
71    </Button>
72        </div>
73        </div>
74      </Modal>
75      )}
76
77      
78    </div>
79  );
80};
81
82export default Profile;

エラー箇所

<textarea className={styles.message_area} value={message} onChange={(e:React.ChangeEvent<HTMLTextAreaElement>) => (e.target.value)} name="message" cols={30} rows={5}>{message}</textarea>
        <div className={styles.modal_button}>
        <Button variant="contained" color="primary" onClick={() => setMessage(value)} >
      変更する
    </Button>
    <Button variant="contained" color="primary" onClick={() => handleClose()}>
    キャンセル
    </Button>
        </div>

エラー文

valueはtextareaのところで定義してるのですが、どこが原因なのかわからず。
宜しくお願い致します。

hoshi-takanori

2021/04/12 21:49

textarea では value={message} としてるので、同様に setMessage(message) とすれば良いのでは。

moemo

2021/04/13 01:24

1つお聞きしたいのですが、変更ボタンを押した時だけmessageの値を更新したく、キャンセルボタンが押された時はuseStateの初期値の値を表示させたいと考えてます。現状の仕様だと入力した時点でmessageの値が更新されてしまい、キャンセルボタンを押しても値が変更されしまいます。キャンセルボタンを押した時に初期値を表示する挙動は可能なのでしょうか？それともreduxを使用するべきなのでしょうか？