If you want to use the Table of Antd to make a player, how to modify the Icon of the corresponding number of lines when playback is paused?

problem description

because < Icon / > I render uniformly, and then modify the state uniformly through state . As a result, all Icon will change as soon as the state changes. But I want to change only the one I clicked on. The demand is strange. I hope God will forgive me

the environmental background of the problems and what methods you have tried

A ternary judgment is added to the type attribute in the Icon component of Antd. Cause Icon to change uniformly

related codes 

const columns = [{
    title: "",
    dataIndex: "name",
    key: "name",
    width: 400
}, {
    title: "",
    dataIndex: "song",
    key: "song",
}, {
    title: "",
    dataIndex: "action",
    key: "action",
    render: (text, record, rowkey) => (
        <span>
            <Icon type="download" className="action marginRight"/>
            <Icon type={ isPlay ? `pause-circle` : `play-circle`}  className="action" onClick={this.handlePlay.bind(this, record, rowkey)}/>
        </span>
    )

< Table 

columns={columns}
dataSource={tableList}

/ >

what result do you expect? What is the error message actually seen?

clipboard.png

want to change only the icon of the line that is clicked and played

Antdesign react.js
Dec.03,2021

first of all, I guess that the isPlay of the subject is changed to true after clicking on the playback of a line, which will cause the Icon > of all lines to change
. My idea is to change the isPlay attribute of the current record after clicking on the playback of a line, that is, to add isPlay to true to the current click record . 

{
    title: '',
    dataIndex: 'action',
    key: 'action',
    render: (text, record, rowkey) => (
        <span>
            <Icon type="download" className="action marginRight"/>
            <Icon type={ record.isPlay ? `pause-circle` : `play-circle`}  className="action" onClick={this.handlePlay.bind(this, record, rowkey)}/>
        </span>
    )

that should do it

Previous: What happens when you can't scroll with vue-seamless-scroll?

Next: How vue renders components with variable names

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
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-1e57549-45427.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-1e57549-45427.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?