StateMods

block.tsx

import * as React from 'react';
import { cn, ClassNameFormatter } from '@bem-react/classname';
import { withBemClassName } from '@bem-react/core';

const block = cn('Block');

interface IBlockProps {
    wow?: string;
    className?: ClassNameFormatter;
}

interface IBlockState {
    ololo: boolean;
}

const mapPropsToBemMods = ({ wow }: IBlockProps) => ({ wow });
const mapStateToBemMods = ({ ololo }: IBlockState) => ({ ololo });

class BlockPresenter extends React.Component<IBlockProps, IBlockState> {
    componentDidMount() {
        this.setState({ ololo: true });
    }
    render() {
        const stateMods = mapStateToBemMods(this.state);
        const classString = this.props.className(stateMods);

        return <div className={classString} />;
    }
}

export const Block = withBemClassName(block, mapPropsToBemMods)(BlockPresenter);

className={list(this.props.className, block({ ololo: this.state.ololo }))}

className={this.props.className({ ololo: this.state.ololo })}