I'm trying to make toggle menu by using state. I want to hide component when the value of state is false. So I made conditional rendering in styled-component but there is an error. It says "'isChecked' is not defined no-undef". I want to fix this error but don't know how to fix it and where is wrong. I'd appreciate it if you let me know Thanks!

This is my code. The cord was long, so I erased the irrelevant part. It's still a long code, but I think you just need to look at the part I commented on

import React, { useState } from 'react'
import styled from 'styled-components';

const Body3LeftStart = styled.div`
  flex-basis: 66.66666667% !important;
  max-width: 66.66666667%;
  box-sizing: border-box;
  flex: 0 0 auto;
  padding-left: 8px;
  padding-right: 8px;
`
const Body3LeftSection = styled.div`
  margin-bottom: 8px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000a12;
  box-sizing: border-box;

  #Body3Section1 {
    display: flex;
    align-items: flex-end;
    margin-bottom: 8px;
  }

  #Body3Section1::before {
    display: block;
    margin-top: -71px;
    padding-top: 71px;
    visibility: hidden;
    content: " ";
    z-index: 0;
  }

  #Body3Section1Span {
    margin-right: 8px;
    line-height: 1.45;
    letter-spacing: -.3px;
    color: #343a40;
    font-size: 22px;
    font-weight: 700;
  }

  #Body3Section1Span2 {
    line-height: 1.5;
    letter-spacing: -.3px;
    font-size: 16px;
    color: #adb5bd;
    font-weight: 500;
  }
`

const Body3LeftSection2 = styled.div`
  display: flex;
    margin-bottom: 20px;
    align-items: flex-end;

    #Body3LeftSection2Text {
      font-weight: 400;
    line-height: 1.47;
    letter-spacing: -.3px;
    font-size: 15px;
    margin-right: 12px;
    color: #495057;
    word-break: keep-all;
    }

`

const Body3LeftToggle = styled.div`
  overflow: hidden;
    border: 1px solid #e9ecef;
    border-radius: 4px;
`

const Body3LeftToggle1 = styled.div`
  box-sizing: border-box;
  font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
`

const Body3LeftToggleTitle = styled.div`
  border-top: unset;
  display: flex;
    align-items: center;
    padding: 15px 20px;;
    border-bottom: 1px solid #f1f3f5;
    background-color: #f8f9fa;
    cursor: pointer;

    #Body3LeftToggleButton {
      display: inline-flex;
      margin-right: 8px;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
    }
`
const Body3LeftToggleTitleText = styled.div`
  line-height: 1.47;
    letter-spacing: -.3px;
    font-size: 15px;
    color: #343a40;
    font-weight: 700;
    font-style: inherit;
`

const Body3LeftToggleTitleText2 = styled.div`
  font-weight: 400;
    line-height: 1.47;
    letter-spacing: -.3px;
    font-size: 15px;
    margin-left: auto;
    color: #343a40;
`

//This is the component I want to put in a toggle. I used conditional rendering here.
const Body3LeftToggleContent = styled.div`
  max-height: 50px;
  overflow: hidden;
  ${isChecked===false}{
    display: none;
  }

`
const Body3LeftToggleContentWrap = styled.div`
  display: flex;
    align-items: center;
    padding: 14px 20px;
`

function Body3Left() {

  // I made useState here
  const [isChecked,setChecked] = useState(false)

  return (
    <Body3LeftStart>
        <Body3LeftSection>
            <div id='Body3Section1'>
              <span id='Body3Section1Span'>
                커리큘럼
              </span>
              <span id='Body3Section1Span2'>
              총 39
              개 ˙ 5시간 2분의 수업
              </span>
            </div>
            <Body3LeftSection2>
              <span id='Body3LeftSection2Text'>
                이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
              </span>
              <button id='Body3LeftSection2Button'>
                모두 접기
              </button>
            </Body3LeftSection2>
            <Body3LeftToggle>
              <Body3LeftToggle1>
                <Body3LeftToggleTitle>
                  // I used button here. I erased it because the svg code was long, but there is an arrow picture in it. I changed the value every time I pressed the button
                  <span id='Body3LeftToggleButton'>
                    <svg onClick={()=>{setChecked(!isChecked)}} style={{display:isChecked===true&&'none' ,width:'16', height:'16'}}></svg>
                    <svg onClick={()=>{setChecked(!isChecked)}} style={{display:isChecked===false&&'none' ,width:'16', height:'16'}}></svg>
                  </span>
                  <Body3LeftToggleTitleText>
                    섹션 0. 소개
                  </Body3LeftToggleTitleText>
                  <Body3LeftToggleTitleText2>
                    1강  ∙  4분
                  </Body3LeftToggleTitleText2>
                </Body3LeftToggleTitle>
                <Body3LeftToggleContent>
                  <Body3LeftToggleContentWrap>
                    <span id='Body3LeftToggleContentText1'>
                      강의 소개
                    </span>
                    <span id='Body3LeftToggleContentText2'>
                      <span id='Body3LeftToggleContentText3'>
                        04:41
                      </span>
                    </span>
                  </Body3LeftToggleContentWrap>
                </Body3LeftToggleContent>
              </Body3LeftToggle1>
            </Body3LeftToggle>
        </Body3LeftSection>
    </Body3LeftStart>
  )
}

export default Body3Left;

CodePudding user response：

you have to pass the state as props to the styled component as

  const Body3LeftToggleContent = styled.div`
  max-height: 50px;
  overflow: hidden;
  display: ${props => props.isChecked ? "block" : "none"};  // get prop value as so
`;

from the JSX as

  </Body3LeftToggleTitle>
      <Body3LeftToggleContent isChecked={isChecked}>  // like so
  <Body3LeftToggleContentWrap>

only added the parts of the code to alter ....

for reference on passing props