Add class after action onClick React / Redux

Question

I have table and action icon 'delete' for example: http://joxi.ru/gmvzWx4CxKbX5m

After click on icon, in my Redux Action i get TR and add class 'adm-pre-removed'

import * as types from '../constant/domain.const.js';

export function deleteDomain(event){

    return (dispatch, getState) => {

        (async () => {

            let domainIdElement = event.target.closest('tr'),
                id = domainIdElement.getAttribute('data-id');

            domainIdElement.classList.add('adm-pre-removed');

            setTimeout(() => {
                dispatch({
                    type: types.REMOVE_DOMAIN_SUCCESS,
                    id: id
                })
            }, 3000)



        })()

    }

}

The problem is after the dispatch state is triggered and the render happens but the class remains.

I know that this is not a react way. And I really do not want to create a property in an article and to control this class is too much code. And to all this class should appear when clicking and disappear when the state has changed.

You can of course create another action and order the event onMouseDown but this is also a lot of code.

Which option is correct and how best to do it?

Render (Controll view)

function mapStateToProps (state) {
  return {...state.menu}
}


function mapDispatchToProps(dispatch){
    return {
        ...bindActionCreators({
            ...listMenu,
            ...deleteMenu,
            ...addMenu,
            ...removeError
        }, dispatch),
        dispatch
    }
}

class Menu extends React.Component {

    constructor (props, context) {
        super(props, context);
    }

    componentDidMount() {
        this.props.listMenu()
    }

    componentDidUpdate(){
        //FormHelper.reactReRender('.adm-domain-form');
    }

    render() {
        return (<div>
                    {this.props.errorMessage ? <Notification close={this.props.removeError} errorMessage={this.props.errorMessage} /> : ""}
                    <Sidebar />
                    <MenuPreview {...this.props} />
               </div>);
    }

}

Menu.contextTypes = {
    router: PropTypes.object
}


export default connect(mapStateToProps, mapDispatchToProps)(Menu);

Render Component:

class MainEventsView extends React.Component {

    render(){

        return (
            <div className="adm-content">
                <Header />
                <div className="container-fluid adm-card-head">
                    <Add {...this.props} />
                    <List {...this.props} />
                </div>
            </div>
        );

    }

}

export default MainEventsView;

Render List:

class ListMenu extends React.Component {

    render(){

        return(
            <div className="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div className="adm-card adm-card-table">
                    <div className="table-responsive">
                        {this.props.menu && this.props.menu.length > 0 ? 
                            <Table {...this.props} /> : 
                            <p className="adm-card-table__text-no-available turn-center">Available menu are not found</p>
                        }
                    </div>
                </div>
            </div>
        )

    }

}

export default ListMenu;

Render Table:

class Table extends React.Component {

    render () {
        return (
                <table className="adm-users-table__wrapper-table">
                    <Thead {...this.props} />
                    <Tbody {...this.props} />
                </table>
        );
    }

}


export default Table;

Render Tbody:

class Cell extends React.Component {

    render () {

        let usersTemplate = this.props[this.props.name].map((item, i) => {
            return (
                <tr key={i} data-id={item.id}>
                    {this.template(item)}
                </tr>
            );
        });

        return (
            <tbody>
               {usersTemplate}
            </tbody>
        );
    }

    template (items) {

        let keyArray = Object.keys(items),
            uniqKey,
            field,
            userCell = keyArray.map((item, i) => {
                uniqKey = i;
                field = items[item] instanceof Object ? _.values(items[item]).join(', ') : items[item];
                return (
                    <td key={i} className="adm-users-table__wrapper-table-data relative-core">{field}</td>
                );
            });

        userCell.push(<Actions key={uniqKey + 1} id={items.id} {...this.props} />)

        return userCell;

    }

}

export default Cell;

Answer 1

Maybe, it could be. React renders elements in virtual dom and update changed elements in real-dom. So your class is remained still. I think that you have to figure out another way.