How to add a dynamic variable to the array?

Question

I need to dynamically insert an array (=> inputClasses) String (=> 'Invalid') which is actually a class from css. And then from the HTML tag to read the two of them together. The problem is he doesn't give me both. What's my mistake?

import React from 'react';
import './Input.css';

const input = (props) => {
    let inputElement = null;
    const inputClasses = ['InputElement'];

    if (props.invalid) {
        inputClasses.push('Invalid');
    }

    switch (props.elementType) {
        case ('input'):
            inputElement = <input
                className={inputClasses.join()}       <---------- Here he does not give me both
                {...props.elementConfig}
                defaultValue={props.value}
                onChange={props.changed} />;
            break;
        case ('textarea'):
            inputElement = <textarea
                className={inputClasses.join()}       <---------- And Here he does not give me both
                {...props.elementConfig}
                defaultValue={props.value}
                onChange={props.changed} />;
            break;
        case ('select'):
            inputElement = ( 
                <select
                    className={inputClasses.join()}         <---------- And Here he does not give me both
                    defaultValue={props.value}
                    onChange={props.changed}>
                    {props.elementConfig.options.map(option => (
                        <option key={option.value} defaultValue={option.value}>
                            {option.displayValue}
                        </option>
                    ))}
                </select>
            );
            break;
        default:
            inputElement = <input
                className={inputClasses.join()}      <---------- And Here he does not give me both
                {...props.elementConfig}
                defaultValue={props.value}
                onChange={props.changed} />;
    }

    return (
        <div className="Input">
            <label className="Label">{props.label}</label>
            {inputElement}
        </div>
    );
};

export default input;

I appreciate every answer! Thanks

Answer 1

You gotta have a space between your class names, not a comma

inputClasses.join(' ')