In the react project, there are several div, in this code. I hope I can optimize this code. How can I modify it?

<div className={"video"}>
                        <div
                            className={"allTasks fl"}
                            style = {
                                this.state.current === 0 ? changeColor : changeColor02
                            }
                            onClick={(event) => this.handleClickLi(0, event)}
                        >
                            
                        </div>
                        <div
                            className={"handleVideo fl"}
                            onClick={(event) => this.handleClickLi(1, event)}
                            style = {
                                this.state.current === 1 ? changeColor : changeColor02
                            }
                        >
                            
                        </div>
                        <div
                            className={"passVideo fl"}
                            onClick={(event) => this.handleClickLi(2, event)}
                            style = {
                                this.state.current === 2 ? changeColor : changeColor02
                            }
                        >
                            
                        </div>
                        <div
                            className={"misdeedVideo fl"}
                            onClick={(event) => this.handleClickLi(3, event)}
                            style = {
                                this.state.current === 3 ? changeColor : changeColor02
                            }
                        >
                            
                        </div>
                        <div
                            className={"dataAnalysis fl"}
                            onClick={(event) => this.handleClickLi(4, event)}
                            style = {
                                this.state.current === 4 ? changeColor : changeColor02
                            }
                        >
                            
                        </div>
                    </div>
Mar.30,2021

const list = [ { name: "" },{ name: "" },{ name: "" },{ name: "" } ]
...
{list.map((item))=> {
    return (
        <div
           className={'misdeedVideo fl'}
           onClick={(event) => this.handleClickLi(3, event)}
           style = {this.state.current === 3 ? changeColor : changeColor02}
            >
              {item.name}
        </div>
    )
    }
}

as for those parameters, the same reason


none of the previous answers deal with className and style .


const list = [ { name: "" },{ name: "" },{ name: "" },{ name: "" } ]
const block =(current, name) => <div
       className={'misdeedVideo fl'}
       onClick={(event) => this.handleClickLi(3, event)}
       style = {this.state.current === current ? changeColor : changeColor02}
        >
          {name}
</div>

render() {
    return <div>
        {
            list.map((item))=> block(this.state.current, item.name)
        }
    </div>
    
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b228e7-40668.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b228e7-40668.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?