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

Max · Accepted Answer · 2020-01-26 10:09:43Z

1

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

inputClasses.join(' ')

answered Jan 26, 2020 at 10:09

Max

2,0361 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add a dynamic variable to the array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related