Dynamic render implementation

DynamicRenderImplementation.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Translate from './highOrderComponents/WithTranslate';
import ClickOutside from './highOrderComponents/ClickOutside';
import WithUser from './highOrderComponents/WithUser';

import {
  configureUser,
} from './store/actions';

class MyCoolComponent extends Component {
  render() {
    const {
      preferences,
      onConfigureUser,
    } = this.props;
  
    return (
      <ClickOutside>
        {(isActive, onClick) => {
          if (!isActive) {
            return null;
          }

          return (
            <Translate>
              {translate => (
                <div onClick={onClick}>
                  {translate('welcome', user.name)}
                  <button onClick={onConfigureUser}>
                    {translate('configure', preferences)}
                  </button>
                </div>
              )}
            </Translate>
          );
        }}
      </ClickOutside>
    );
  }
}

const mapStateToProps = state => ({
  preferences: state.preferences,
});

const mapDispatchToProps = {
  configureUser,
};

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