div {
padding: 0.5rem;
font-size: 1.5rem;
margin-left: 2rem;
color: black;
&:hover {
color: coral;
cursor: pointer;
}
}
.active {
color: blue;
}
this.state = {
....
sheetStyle: [],
};
}
this.setState({
....
sheetStyle: `${sheet}`,
})
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>
))}