react div tag active

BackEnd_Ash.log·2020년 7월 11일
0

react

목록 보기
21/41

css

  div {
    padding: 0.5rem;
    font-size: 1.5rem;
    margin-left: 2rem;
    color: black;

    &:hover {
      color: coral;
      cursor: pointer;
    }
  }
  .active {
    color: blue;
  }

state settings

    this.state = {
      ....
      sheetStyle: [],
    };
  }

setState

       this.setState({
  	  ....
          sheetStyle: `${sheet}`,
        })

rendering

when rendering ,
i have to apply active for click tag
so

you sould be use map function inside 삼항연산자 function and find the tag you need and apply this style active

              {this.state.sheetData.map((sheet, i) => (
                <div>
                  {this.state.sheetStyle === sheet ? (
                    <div
                      key={i}
                      className="active"
                      onClick={() =>
                        this.getSheets(this.state.excel_name, sheet)
                      }
                    >
                      {sheet}
                    </div>
                  ) : (
                    <div
                      key={i}
                      onClick={() =>
                        this.getSheets(this.state.excel_name, sheet)
                      }
                    >
                      {sheet}
                    </div>
                  )}
                </div>
              ))}
profile
꾸준함이란 ... ?

0개의 댓글