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

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

Menu