ReactでJsonファイルの特定の値によって、背景画像を切り替えたい

Question

前提

ReactでJsonファイルを読み込んで、Jsonファイルにある「type」の値によって背景画像を切り替えたいと思っています。
背景画像は青いアイコン、赤いアイコン、オレンジのアイコンなど複数あるイメージです。

背景画像はコンポネートファイルに読み込んで、それをstyle属性に設定しようと考えています。

実現したいこと

Jsonファイルのある「type」の内容によって条件分岐でstyle属性に設定する背景画像を変更したい。
よく三項演算子などで、切り替えたりしますが条件が複数の場合の方法が知りたいです。

ファイル構成は下記です。

dummy.json
App.js
SecondBlock.js

jsonファイルを読み込んでSecondBlock.jsのコンポーネントで背景画像を切り替えたいと思っています。

該当のソースコード

JSONファイルあくまでダミーです。

{
    "dummy": [
      
      {
        "type":"red",
        "tracknumber":7,
        "time": "17:00",
        "homenumber":6,
        "congestion":[
          {"num":5,"icon":1,"cool":false},
          {"num":15,"icon":2,"cool":false},
          {"num":20,"icon":3,"cool":true},
          {"num":10,"icon":2,"cool":false},
          {"num":4,"icon":1,"cool":false},
          {"num":8,"icon":1,"cool":true},
          {"num":14,"icon":2,"cool":false},
          {"num":14,"icon":2,"cool":true},
          {"num":14,"icon":2,"cool":true},
          {"num":14,"icon":2,"cool":false},
          {"num":14,"icon":2,"cool":false}
        ]
      },
      {
        "type":"blue",
        "tracknumber":4,
        "homenumber":7,
        "congestion":[]
      },
{
        "type":"orange",
        "tracknumber":4,
        "homenumber":7,
        "congestion":[]
      }
    ]
  }

`

import React, {  useEffect, useState } from "react";
import SecondBlcok from '../components/SecondBlock'

const App= () => {

  const [jsonData,setJsonData]=useState([])
  
  const fetchData = async () => {
    try {
      const res = await fetch(`${process.env.PUBLIC_URL}/dummy.json`);
      const data = await res.json()

      setJsonData(data.dummy)

    } catch (error) {
      console.log("error", error);
    }
  }

  useEffect(() => {
    fetchData ()
  }, [])
  
  return (
       <div className='bg-[#5582c3]'>
        <div className="mt-[11vw] p-[2vw]">
          
            {jsonData.map((data,idx)=>{
            const info = {
              type:data.type,
              tracknumber:data.tracknumber,
              time:data.time,
              homenumber:data.homenumber,
              congestion:data.congestion
            }

              return(
                <div key={idx}>
                <SecondBlcok info={info}>
                  <ThirdBlock />
                </SecondBlcok>
              </div>
              )
          
            })}
    
        </div>
      </div>
   
  );
};

export default App;

下記がコンポーネントとして読み込むファイルです。

import React  from 'react'

  const bgIconBlue = {
    'background': `url(/images/bg_st-blue.jpg) 0 0 no-repeat`,
    'backgroundSize': "contain"
  }

  const bgIconOrange = {
    'background': `url(/images/bg_st-orange.jpg) 0 0 no-repeat`,
    'backgroundSize': "contain"
  }

  const bgIconRed = {
    'background': `url(/images/bg_st-red.jpg) 0 0 no-repeat`,
    'backgroundSize': "contain"
  }
  
const SecondBlock = ({info,children}) => {
  const {type,destination,tracknumber,time,homenumber}=info


  return (
    <div className="text-center bg-white">  
         <div style={} className="p-[2vw_2vw_0_8vw]">
              <p>ここは省略</p>
            </div>
            {/* 3nd accordino */}
            {children}
        </div>
  )
}

export default SecondBlock

試したこと

SecondBlock.jsのコンポーネントファイルにて。
まず条件分岐などなく、ふつうに設定すれば背景画像は表示されます。

下記、該当部分以外は省略しています。

 const bgIconBlue = {
    'background': `url(/images/bg_st-blue.jpg) 0 0 no-repeat`,
    'backgroundSize': "contain"
  }


return (
    <div className="text-center bg-white">  
         <div style={bgIconBlue } className="p-[2vw_2vw_0_8vw]">
              <p>ここは省略</p>
            </div>
            {/* 3nd accordino */}
            {children}
        </div>
  )

しかし、三項演算子だとエラーがでます。

import React  from 'react'

  const bgIconBlue = {
    'background': `url(/images/bg_st-blue.jpg) 0 0 no-repeat`,
    'backgroundSize': "contain"
  }

  const bgIconOrange = {
    'background': `url(/images/bg_st-orange.jpg) 0 0 no-repeat`,
    'backgroundSize': "contain"
  }

  const bgIconRed = {
    'background': `url(/images/bg_st-red.jpg) 0 0 no-repeat`,
    'backgroundSize': "contain"
  }
  
const SecondBlock = ({info,children}) => {
  const {type,destination,tracknumber,time,homenumber}=info


  return (
    <div className="text-center bg-white">  
         <div style={`${type? bgIconBlue : bgIconRed }`} className="p-[2vw_2vw_0_8vw]">
              <p>ここは省略</p>
            </div>
            {/* 3nd accordino */}
            {children}
        </div>
  )
}

export default SecondBlock

上記のように「type」による三項演算子でやってみましたが、エラーがでますが、JSXにhtmlのようなスタイルの当て方がNGだと思います。

react-dom.development.js:2963 Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

上記のように3つ以上の条件で背景画像を変更したいのですがどうすればいいのでしょうか？
ご教授いただけると助かります。

よろしくお願いいたします。

Comments

[hoshi-takanori]

三項演算子を使うなら、style の値は文字列ではなくオブジェクトなので、
style={type ? bgIconBlue : bgIconRed}
でいいはず。

そして、3つ以上になる場合は、無理やり書けないこともないけど、return の前でいったん変数に入れた方がわかりやすいと思います。

[yamayama0812]

ご回答ありがとうございます。
書き方が間違えてましましたね。。すみません。

やはり3つ以上だとreturnの前に普通にif文などで条件分岐で変数に入れたほうが良いんですね。

Reactが初めてなので、いわゆる「こうしたほういい」みたいな方法があるのかと思いまして。
ちょっと試してみます。ありがとうございます。

[yamayama0812]

hoshi-takanori 様

こちら試した結果ですが、希望通り表示されました。
ありがとうございます。

Answer 1

こちらアドバイスをもとに下記のように実装しました。
SecondBlock.js内でもいいのですが、最初にJsonを読み込んでmap関数ないでif文の条件分岐でアイコンを変数に入れています。
そのあとにinfoのオブジェクトに変数アイコンを追加してそれをSecondBlock.jsにprops経由で渡しています。

import React, {  useEffect, useState } from "react";
import SecondBlcok from '../components/SecondBlock'


const bgIconBlue = {
  'background': `url(/images/bg_st-blue.jpg) 0 0 no-repeat`,
  'backgroundSize': "contain"
}

const bgIconOrange = {
  'background': `url(/images/bg_st-orange.jpg) 0 0 no-repeat`,
  'backgroundSize': "contain"
}

const bgIconRed = {
  'background': `url(/images/bg_st-red.jpg) 0 0 no-repeat`,
  'backgroundSize': "contain"
}


const App= () => {

  const [jsonData,setJsonData]=useState([])
  
  const fetchData = async () => {
    try {
      const res = await fetch(`${process.env.PUBLIC_URL}/dummy.json`);
      const data = await res.json()

      setJsonData(data.dummy)

    } catch (error) {
      console.log("error", error);
    }
  }

  useEffect(() => {
    fetchData ()
  }, [])
  
  return (
       <div className='bg-[#5582c3]'>
        <div className="mt-[11vw] p-[2vw]">
          
            {jsonData.map((data,idx)=>{

              let icon={}
              if(data.type==="blue"){
                icon=bgIconBlue
               
              }else if(data.type==="red"){
                icon=bgIconRed
              }else if(data.type==="orange"){
                icon=bgIconOrange
              }

            const info = {
              type:data.type,
              tracknumber:data.tracknumber,
              time:data.time,
              homenumber:data.homenumber,
              congestion:data.congestion,
              icon:icon
            }

              return(
                <div key={idx}>
                <SecondBlcok info={info}>
                  <ThirdBlock />
                </SecondBlcok>
              </div>
              )
          
            })}
    
        </div>
      </div>
   
  );
};

export default App;

コンポーネントの引数からiconを取り出してstyle属性に設定。

import React  from 'react'

const SecondBlock = ({info,children}) => {
  const {icon,destination,tracknumber,time,homenumber}=info

  return (
    <div className="text-center bg-white">  
         <div style={icon} className="p-[2vw_2vw_0_8vw]">
              <p>ここは省略</p>
            </div>
            {/* 3nd accordino */}
            {children}
        </div>
  )
}

export default SecondBlock

上記の処理で解決できました。