I'm trying to make a button now. If I keep clicking the button using onClick function and state, I want to see the two buttons alternately. But it's applied at first, but the button isn't applied after second. Button's code is the same, but I don't know why it works only once. I'd appreciate it if you give an advice Thanks!!

import React, { useEffect, 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;
  font-family: Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif;

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

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;
    }

    #Body3LeftSection2Button {
      border-color: #d5dbe2;
    color: #495057;
    background-color: #fff;
    flex-shrink: 0;
    margin-left: auto;
    border: 1px solid;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    -webkit-appearance: none;
    padding: 0 12px;
    height: 40px;
    line-height: 1.43;
    font-size: 14px;
    letter-spacing: -.3px;
    }
`

function Body3Left() {

  const [isCheckAll, setCheckAll] = useState(true)

  function handleState (e) {
    setCheckAll(isCheckAll===false)
  }

  function noHandleState (e) {
    setCheckAll(isCheckAll===true)
  }


  return (
    <Body3LeftStart>
        <Body3LeftSection>
            <Body3LeftSection2>
              <span id='Body3LeftSection2Text'>
                이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
              </span>
              <button onClick={handleState} style={{display:isCheckAll===false?'none':'block'}} id='Body3LeftSection2Button'>
                모두 접기
              </button>
              <button onClick={noHandleState} style={{display:isCheckAll===true?'none':'block'}} id='Body3LeftSection2Button'>
                모두 펼치기
              </button>
            </Body3LeftSection2>   
        </Body3LeftSection>
    </Body3LeftStart>
  )
}

export default Body3Left;

CodePudding user response：

you update state function in wrong way

you should update is as this way:

setCheckAll(pre => !pre)