[React / JS] 関数内で生成したデータ（変数）を関数外で使いたい

Question

要件

関数内で生成したデータ（変数）を関数外で使いたいですが
どう書いたら使えますか？

以下ではうまくいきません。

id変数にpropsで渡ってきたデータを入れたい。

const propid = (props) => {
  const {id} = props.match.params;
  console.log(id);
}

const id = propid;

追記

下記コードはconst pref = 'PREF28';の部分で兵庫県エリアを直書きで指定しています。
こちらを親から~/:idで渡したパラメータを変数として入れたい。
ただHyogo関数内にしかpropsで受け渡したデータを使用することができません。
また試しにconst keyId〜検索クエリ一式をHyogo関数内に入れるとうまくfetchしてくれません。

なのでやったこととしては、const keyIdの前で新たにpropsを呼び出す関数をつくればいけるかと思ったのですが、
回答のコードで試してもundefiedで値が取得できませんでした。

// import省略

const keyId = 'your_key'; // ぐるなびAPI KEY
const pref = 'PREF28'; // 現在こちらを直書きでエリア指定しています
const hitPerPage = 99; // 件数（Max100）
const lunch = 0; // 0 or 1
const takeout = 1; // 0 or 1
const bento = 1; // 0 or 1
const deliverly = 0; // 0 or 1

// 検索クエリ
const URL = `https://api.gnavi.co.jp/RestSearchAPI/v3/?
keyid=${keyId}&
pref=${pref}&
hit_per_page=${hitPerPage}&
lunch=${lunch}&
takeout=${takeout}&
bento=${bento}&
deliverly=${deliverly}`;

const Hyogo = (props) => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetchArticles();
  }, []);

  const fetchArticles = async () => {
    try {
      const res = await axios.get(URL);
      setArticles(res.data.rest);
    } catch (error) {
      console.error(error);
    }
  }
  
  return (
    <div className="article">
      {/* 省略 */}
    </div>
  );
}

export default Hyogo;

Comments

[anozon]

表示してるページの URL の :id を取り出したいという意味であっていますか？
routingライブラリは何を使っていますか？
例えば react-router-dom でしたら
props.match はトップのcomponent でしか取り出せません
代わりに
import { useParams } from "react-router-dom";
↓component内
let { id } = useParams();
などで取り出せます

Answer 1

const { id } = propid(props)

というふうに呼び出すのでは駄目ですか？

Answer 2

constではなくletで宣言する方法もあります。

let id;

const propid = (props) => {
  id = props.match.params.id;
  console.log(id);
}

もっとも、呼び出し方や使い方を考えた場合に、「これでは動かない」あるいは「もっと良い書き方がある」となる可能性もあります。

Comments

[DaisukeMori]

console.log(id);を関数内ではなく関数外で使う方法はありませんか？

[maisumakun]

上のコードで、そのままconsole.log(id);を関数外に移すこともできます。

[DaisukeMori]

すみません。具体的に今やってることを追記しました。
よろしくお願いします。

もちろんpropsの受け渡し出なくてもHyogoコンポーネントを丸っとコピーして47都道府県分（47ファイル）作ることは可能ですが、個人開発だからいいですが、もし案件開発になった際それだとメンテナンスに工数が増大したりデータの肥大化につながるのであまりしたくありませんとかいうか絶対したくありません。

[maisumakun]

でしたら、逆にURLをコンポーネント内で生成する形が適当なのではないでしょうか？

（idはコンポーネントに紐づくものである以上、その外側で処理に使おうという考え方そのものが適切ではないです）