[2022.07.16](1) 버튼클릭시 해당 map과 내용보이기, json데이터 중 없는 내용은 안 보이게 설정 오류/index에 따른 컴포넌트 보이게 설정 오류

zata Map.jsx

 

오류 1.json파일 없는 내용은 안 보이게 하고 싶으나 jsx파일에서 map을 돌렸기에 빈칸으로 출력돼서 list형식이 보임

오류2: 해당 index에 따른 컴포넌트를 불러오고 싶으나 버튼 클릭시 한꺼번에 보임(json에서 <컴포넌트/>를 값으로 지정해 불러오려 했으나 컴포넌트는 태그처럼 안 불러와졌음)

 

[
  {
  "id":0,
  "title":"서울본사",
  "mapImg":"ZetaKrMap",
  "address":"서울특별시 금천구 디지털로 130 남성프라자 1210호",
  "tel":"02-538-4801",
  "fax":"02-6008-4779"
  },{
    "id":1,
    "title":"China",
    "mapImg":"ZetaCnMap",
    "address":"6F, Beiguang Building, No.23, Huangsi Street, Xicheng District, Beijing, China",
    "tel":"+86-10-8223-4950"
  },
  .....
]

 

해결1: json파일에 우선 빈칸으로 배열을 만들어 놓음

 

[
  {
  "id":0,
  "title":"서울본사",
  "mapImg":"ZetaKrMap",
  "address":"서울특별시 금천구 디지털로 130 남성프라자 1210호",
  "tel":"02-538-4801",
  "fax":"02-6008-4779"
  },{
    "id":1,
    "title":"China",
    "mapImg":"ZetaCnMap",
    "address":"6F, Beiguang Building, No.23, Huangsi Street, Xicheng District, Beijing, China",
    "tel":"+86-10-8223-4950",
    "fax":"",
  },
  .....
]

 

해결1,2

▼  jsx 코드

해결1: li의 className에 삼항연산자를 이용하여 조건 충족시 display:none되는 class를 붙여줌

해결2: 조건 충족시 해당 컴포넌트를 보여주고 아닐 시, null되게 만들어줌

{
            ztMapDtLi.map(function(data,i){
              return(
                <div key={data.id} className={ztMapView===i?'ztMapContent ztMapOn':'ztMapContent ztMapOff'}>
                  <div className='ztMapLook'>
                    {i===0?<ZetaKrMap />:null}
                  </div>
                  <div>
                    {i===1?<ZetaCnMap />:null}
                  </div>
                  <div>
                    {i===2?<ZetaVtmMap />:null}
                  </div>
                  <div>
                    {i===3?<ZetaIndoMap />:null}
                  </div>
                  <div>
                    {i===4?<ZetaHnMap />:null}
                  </div>
                  <ul className='ztMapGuide'>
                    <li className={ztMapDtLi[i].address===''?'ztMapNon':'ztMapAddr'}>
                      <span className='ztMapIcon'>아이콘</span>
                      <span className='ztMapStitle'>Address</span>
                      <span>{ztMapDtLi[i].address}</span>
                    </li>
                    <li className={ztMapDtLi[i].tel===''?'ztMapNon':'ztMapTel'}>
                      <span className='ztMapIcon'>아이콘</span>
                      <span className='ztMapStitle'>Tel</span>
                      <span>{ztMapDtLi[i].tel}</span>
                    </li>
                    <li className={ztMapDtLi[i].fax===''?'ztMapNon':'ztMapFax'}>
                      <span className='ztMapIcon'>아이콘</span>
                      <span className='ztMapStitle'>Fax</span>
                      <span>{ztMapDtLi[i].fax}</span>
                    </li>
                  </ul>
                </div>
              )
            })
          }

 

▼ scss: li에 붙여준 none되는 클래스 설정

.ztMapNon{
    display: none;
  }