83877


表示データをtitleという変数に持たせて、ボタンがクリックされたらchangeTitleでタイトルを変更させているのですが、変数の中身が変更しても、表示上で変わりません。

なにをすれば表示も変わるのでしょうか？

[code]

    import type { NextPage } from 'next'
    
    const Account: NextPage = () => {
      let title = "Title";
    
      function chnageTitle() {
        title = "Changed Title"
      }
    
      return (
        <div>
          <h1>{title}</h1>
          <button onClick={chnageTitle}>Change Title</button>
        </div>
      );
    }
    
    export default Account;
    
[/code]


CC BY-SA 4.0
2021-11-26T08:08:20.043
83817
2021-11-29T23:33:54.073
40856
question
next.js reactjs
Next.js, Reactで表示文字を変更したい


`useState` [フック](https://ja.reactjs.org/docs/hooks-intro.html) が利用できるかと思います。

[code]

    import type { NextPage } from "next";
    import { useState } from "react";
    
    const Account: NextPage = () => {
      const [title, setTitle] = useState("Title");
    
      function chnageTitle() {
        setTitle("Change title");
      }
    
      return (
        <div>
          <h1>{title}</h1>
          <button onClick={chnageTitle}>Change Title</button>
        </div>
      );
    };
    
    export default Account;
    
[/code]


CC BY-SA 4.0
2021-11-29T23:33:54.073
83877
2021-11-29T23:33:54.073
2808
83817
answer