json内に変数を用意してreactでセットする方法

Question

実現したいこと

json内で変数として文字列の中身に組み込み、APIから受け取った情報からそれをreactにてセットしたい。
useTranslationを用いるためこのような仕組みが実現可能か知りたい。

現状のコード

{
  "text": {
    "title": "{{name}}にようこそ",
    "heading": "{{name}}のサイトです",
  }
}

import * as React from 'react'
import { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'

const Page: React.FC = (props) => {
  const [name, setName] = useState('test')
  const { t } = useTranslation('default')

  useEffect(() => {
    (async () => {
      const res = await props.fetcher()

      setHumanizeName(res.data.name)
    })()
  }, [])

  return(
    (useTranslationを用いてjsonを出力)
　　 <h1>{t('text.title')}</h1> 
    <h2>{t('text.heading')}</h2> 
  )

この方法の場合{{name}}の部分は何もない状態でtitleだと「にようこそ」とのみ表示される状態です。
そもそもこの方法が不可能な場合は他の方法があれば教えていただきたいです。

Comments

[hoshi-takanori]

たぶん t('text.title', { name: name }) とかすればいいのでは。
https://phrase.com/blog/posts/localizing-react-apps-with-i18next/#Interpolation

[asasaas]

できました、ありがとうございます！

Answer 1

たぶん t('text.title', { name: name }) とかすればいいのでは。

https://phrase.com/blog/posts/localizing-react-apps-with-i18next/#Interpolation

こちらで解決しました