How can I do conditional rendering on a styled component?

November 1, 2022

I am using conditional rendering to make toggle function. But I think there is a problem with the method because I did conditional rendering on the styled component but it doesn’t work. Can you tell me how to fix it? I’d appreciate it if you let me know thanks

my.jsx:

If I click on another image, the value of the profile becomes false, and if I click on the profile image, the value of the profile becomes true. And according to the value of the profile, I gave the value of the display by conditional rendering the tag whose className is IconWrap6True. But now, the display value of IconWrap6Trued keeps coming out as block, and ‘none’ is not applied. The cord is long, so I skipped the parts that I didn’t need

import React, { useState } from 'react'
import styled from 'styled-components';
import defaultProfile from '../resources/images/img/defaultprofile.jpg'


const NavigationBarWrap1 = styled.div`
  position: fixed;
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  align-items: stretch;



  .IconWrap6True {
    ${props => props.profile ? "block" : "none"};
    box-sizing: border-box;
    border-bottom-left-radius: 50%;
    top: 50%;
    border-top-right-radius: 50%;
    left: 50%;
    border: 2px solid rgb(38,38,38);
    transform: translate(-50%,-50%);
  }



`

function NavigationBar() {

  //state 
  const[home, setHome] = useState(true);
  const[profile,setProfile] = useState(true); 

  //true
  const setTrueHome = () => {
    setHome(true)
  }

  const setTrueProfile = () => {
    setProfile(true)
  }

  //false
  const setFalseHome = () => {
    setHome(false)
  }


  const setFalseProfile = () => {
    setProfile(false)
  }
  
    //handle
   const forHome = (e) => {
    setTrueHome();
    setFalseProfile();
   }

   const forProfile = (e) => {
    setFalseHome();
    setTrueProfile();
   }

  return (
    <NavigationBarWrap1>
              <div className='IconWrap'>
                    <div className='IconWrap4'>
                      <div onClick={forHome} className='IconWrap5'>
                        <div>
                          <div className='IconWrap6'>
                            <div className='IconWrap7'>
                              {home===true?
                              <>
                                <img/>
                              </>:
                              <>
                                <img/>
                              </>}
                              
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
              </div>
              <div className='IconWrap'>
                <div className='IconWrap2'>
                  <div>
                    <div className='IconWrap6'>
                      <div profile={profile} className='IconWrap6True'/>
                      <div onclick={forProfile} className='IconWrap7'>
                        <img src={defaultProfile}/>
                      </div>
                    </div>
                  </div>
                  <div className='textWrap'>
                    <div className='textWrap2'>
                      <div className='textWrap3'>
                        프로필
                      </div>
                    </div>
                  </div>
                </div>
              </div>
    </NavigationBarWrap1>
  )
}

export default NavigationBar;