reactのtextareaタグで値出力

Question

result.getToken()でトークン情報を取得することができたのですが
textarea でその内容を表示することができません。
対応方法をご教示願います。
取得した結果をthisでグローバルな変数に入れて
HTMLの中でそれを参照することを考えつき実装しましたが

const accessToken;

|
| const Peaple= () => {

このようなメッセージが表示されます。

import React from 'react'
import '../App.css'

const accessToken

const Peaple= () => {

  const user = () => {
    authenticateUser({
      onSuccess: (result) => {
        this.accessToken = result.getToken()
      }
    })
  }

  return (
    <div className="sample">
      <textarea value={this.accessToken} />
    </div>
  )
}

Answer 1

state管理していないためrenderがかからないのではないでしょうか？

import React, { useState } from 'react'
import '../App.css'

const accessToken

const Peaple= () => {

  const [accessToken, setAccessToken] = useState(''); 

  const user = () => {
    authenticateUser({
      onSuccess: (result) => {
        setAccessToken(result.getToken());
      }
    })
  }

  return (
    <div className="sample">
      <textarea value={accessToken} />
    </div>
  )
}

Comments

[pokemonta]

やってみます。このやり方なら４行目のconst accessTokenは不要ですね

[pokemonta]

てか、いちいちstateの管理が必要なんですね。。

[nekoniki]

> てか、いちいちstateの管理が必要なんですね。。
裏を返せば「stateで管理していない値による無駄な再描画をしない」のがreactなので、このあたりの煩わしさは仕方ないかなと思います。