[TIL] 11.11 text input 으로 type변환

오늘 한일

container의 이름을 변경 하기 위한 방법으로 text를 클릭하면 input 으로 변경이 되게 하여 수정을 하게 해주려고 하였다.

원래의 코드는 아래와 같았다. 아래의 코드에서 <Button> 부분을 state의 true/false 값으로 변환을 시켜주려고 했다. 

하지만 여러 container가 하나의 state를 공유하고 있어서 하나의 보드를 클릭하면 모든 보드의 값이 변화 하였다.

 {this.state.containers.map((con, index) => 
        <Button color='light' className='border-light' key={con.ct_key} cardVal={con.cards}>
            <UncontrolledDropdown >
              <DropdownToggle caret color="white">
                {con.ct_name}
              </DropdownToggle>
              <DropdownMenu>
                <Input onChange={this.handleUpdateCtName}/>
                <DropdownItem id={con.ct_key} onClick={this.updateContainer}>수정</DropdownItem>
                <DropdownItem divider/>
                <DropdownItem id={con.ct_key} onClick={this.deleteContainer}>삭제</DropdownItem>
              </DropdownMenu>
            </UncontrolledDropdown>
          <ListGroup key={index}>
          {con.cards.map((card, index)=> 
            <InputGroup key={index}>
              <Input style={{border: "0px", backgroundColor: "", margin:"2px", fontWeight: "bold"}}
                id={card.cd_key} 
                key={card.cd_key} 
                placeholder={card.cd_name}
                type="textarea"
                onClick={this.handleCdKey} 
                onChange={this.handleModifyCdName}
                onKeyPress={this.appKeyPress}
              />              
              <InputGroupAddon addonType="append">
                <Button color="white" id={card.cd_key} onClick={this.deleteCard}>x</Button>
              </InputGroupAddon>
            </InputGroup>
            )}

 

그래서 새로운 컴포넌트를 만들어서 각각의 버튼마다 각각의 state를 가지게 만들어 주었지만 map이 돌아가지 않는 에러가 발생하였다. 

그리고 하나의 목록으로 만들어 뒀던 css가 망가져 버렸다. 이후 어떻게 만들어 줘야하나 고민을 했지만 너무 시간을 잡아먹어서 그냥 드랍다운 버튼을 만들어서 그곳에 삭제와 수정 버튼을 추가하여 동작을 하도록 만들었다.