How to use the classnames.classNames function in classnames

import * as React from 'react'
import * as PropTypes from 'prop-types'

// http://lapanoid.github.io/redux-cropper/
// https://goshakkk.name/pabla/
// http://dropsofserenity.github.io/react-avatar-cropper/
// http://roadmanfong.github.io/react-cropper/example/

import { classNames } from 'classnames'

const btnClass = classNames({
    btn: true,
    'btn-pressed': true,
    'btn-over': true
})

console.log(btnClass)

// var arr = ['b', { c: true, d: false }];
// classNames('a', arr); // => 'a b c'

// let buttonType = 'primary';
// classNames({ [`btn-${buttonType}`]: true });

// classNames('foo', 'bar'); // => 'foo bar'

// classNames('foo', 'bar'); // => 'foo bar'

render() {

		var className = classNames('ingame-table', {
			'hide-enemies': this.state.options.hideEnemies,
			'hide-deac': this.state.options.hideDeac
		});

		return (
			<div id="ingame">
				
				<div>
					<div>
						
						</div></div></div>

render() {

		const previousPhaseClassName = classNames( 'previous-phase', this.props.status[0] === 1 && this.props.status[1] === this.props.maxIni && 'disabled' );

		const nextPhaseIcon = (this.props.status[1] == 1 || this.props.status[1] == this.props.usedPhases[this.props.usedPhases.length - 1]) ? '\uE5C8' : '\uE409';

		return (
			<div>
				<div>
					<div>Phase</div>
					<div>{this.props.status[1]}</div>
					<div>Runde {this.props.status[0]}</div>
					<div></div>
					<div>{nextPhaseIcon}</div>
				</div>
				<div>
					
					
				</div></div>

render() {

		const { hint, label, options, value: selected } = this.props;

		const className = classNames( 'dropdown', this.state.isOpen && 'active', this.props.fullWidth && 'fullWidth', this.props.disabled && 'disabled', this.state.position, this.props.className );

		const labelTextElement = this.props.label ? (
			<label>{this.props.label}</label>
		) : this.props.children;

		const style = this.state.isOpen ? (this.props.options.length &lt; 6 ? this.props.options.length * 33 + 1 : 166) : 0;

		const current = this.props.options.filter(arr =&gt; arr[1] == this.props.value);
		const valueText = current.length === 0 ? (this.props.hint ? this.props.hint : '') : current[0][0];

		const downElement = (
			<div style="{{">
				<div style="{{">
					
					
				</div></div>

this.props.fighters.map((fighter) => {

								const className = classNames(fighter.deac && 'deac', fighter.type == 'f' && 'enemy');

								const actionsElement = fighter.cast > 0 ? (
									
										<div>
											({2 + fighter.aktm - fighter.aktv}/{fighter.cast})
										</div>
									
								) : (
									
										<div>
											{2 + fighter.aktm - fighter.aktv}
										</div>
									
								);

								return (

render() {

		const className = classNames( 'dropdown', this.state.isOpen && 'active', this.props.fullWidth && 'fullWidth', this.props.disabled && 'disabled', this.state.position, this.props.className );

		const labelTextELement = this.props.label ? (
			<label>{this.props.label}</label>
		) : this.props.children;

		const style = this.state.isOpen ? (this.props.options.length &lt; 6 ? this.props.options.length * 33 + 1 : 166) : 0;

		const current = this.props.options.filter(arr =&gt; arr[1] == this.props.value);
		const valueText = current.length === 0 ? (this.props.hint ? this.props.hint : '') : current[0][0];

		const downElement = (
			<div style="{{">
				<div style="{{">
					
						{
							this.props.options.map(option =&gt; {</div></div>

this.props.fighters.map(fighter => {

								const className = classNames(fighter.deac && 'deac', fighter.type == 'f' && 'enemy');

								const auElement = fighter.au > 0 ? (
									
								) : null;

								const aeElement = fighter.ae > 0 ? (
									
								) : null;

								const keElement = fighter.ke > 0 ? (
									
								) : null;

								return (

this.props.fighters.map(fighter => {

								const className = classNames(fighter.deac && 'deac', fighter.type == 'f' && 'enemy');

								const indicatorElement = this.props.status[1] == fighter.init || this.props.status[1] == fighter.init - 8 ? (
									<div>{this.props.status[1] == fighter.init ? 1 : 2}</div>
								) : (
									<div></div>
								);

								return (
									
										
											{indicatorElement}
										
									
								);
							})
						}

this.props.fighters.map((fighter) => {

								const className = classNames('type-' + fighter.type, fighter.deac && 'deac', fighter.type == 'f' && 'enemy');

								return (
									
										
											{fighter.ib}
										
										
											<div>
												<div>
													<span>{fighter.init}</span>
													<img alt="" src="">
												</div>
											</div>
										
										
											{fighter.name}

render() {

		const className = classNames( 'bar', `bar-${this.props.type}`, this.props.current > 0 && 'active', this.props.type == 'le' && this.props.max <= 0 && 'no-le');

		return (
			<div>
				<div>
					<div style="{{width:"></div>
					<div></div>
				</div>
			</div>
		);
	}
}