Gatsby内のReactの文字列の結合のやり方について

Question

#知りたいこと
Gatsby内のReactの文字列の結合ついてです。
#やってみたこと
ソースコードはざっくりです。

const Example = ({ word1, word2 }) => {
  return (
          <img src={"https://example.maxcdn.com/" + {word1} + ".jpg" } alt={word2} />
    ....
  );
};

const Test = ({ location }) => {
  return (
        <Example word1="ファイル名1" word2="説明1" />
        <Example word1="ファイル名2" word2="説明2" />
  ....
  );
};

####出力結果

<img src="https://example.maxcdn.com/[object Object].jpg" alt="説明1">
<img src="https://example.maxcdn.com/[object Object].jpg" alt="説明2">
....

どっから"[object Object]"が出ているのかわかりませんでした。
####望んでいる出力結果

<img src="https://example.maxcdn.com/ファイル名1.jpg" alt="説明1">
<img src="https://example.maxcdn.com/ファイル名2.jpg" alt="説明2">
....

#補足情報
初心者すぎて当たり前のことがわからないのでその点よろしくお願いします。

####追記：実際のコード（解決後削除予定）
削除済み

Comments

[A_kirisaki]

コンポーネントの引数が Word1, Word2 で 参照先が小文字になってますがそれはタイポですか？

[j11]

タイポですね。ご指摘ありがとうございます。修正します。

念のため実際のコードを、再度確認&コードフォーマッターを使ってみましたがタイポは見つかりませんでした。

[A_kirisaki]

その word1, word2 は何が入ってきてるかわかりますか？もしくは呼び出し元のコードも見せていただけますか？

[j11]

一応見せれるところは上げときます。

Answer 1

#自分が行った解決方法
itepechiさんの回答を基にして以下のようなコードを試してみたところ正常に動作しました。

const CategoryLink = ({ word1, word2 }) => {
    return (
          <img src={`https://example.maxcdn.com/${word1}.jpg`} alt={word2} />
    ....
  );
};

const Test = ({ location }) => {
  return (
        <Example word1="ファイル名1" word2="説明1" />
        <Example word1="ファイル名2" word2="説明2" />
  ....
  );
};

####変更点

• 変更前<img src={"https://example.maxcdn.com/" + {word1} + ".jpg" alt={word2} /}
• 変更後<img src={'https://example.maxcdn.com/${word1}.jpg'} alt={word2} />

**注意 マークダウンが機能しないので実際には`(グレイヴ・アクセント)**だが上のコードは'(アポストロフィー)に置換。

Answer 2

<img src={"https://example.maxcdn.com/" + {word1} + ".jpg" ...

{word1}はオブジェクトです。

const word1 = "test";

const foo = {word1}; // {word1: word1} の省略記法

console.log(typeof foo); // "object"

文字列にオブジェクトを連結しようとしているため、Object.prototype.toString()が呼び出され、"[object Object]"に変換されています。

{...}を取り払うか、テンプレートリテラルで挿入しましょう。

const word1 = "test";

// テンプレートリテラルで挿入（推奨）
const a = `https://example.maxcdn.com/${word1}.jpg`;

// 加算演算子で連結
const b = "https://example.maxcdn.com/" + word1 + ".jpg";

console.log(a, b); // "https://example.maxcdn.com/test.jpg" "https://example.maxcdn.com/test.jpg"