React function return containing dynamic html is not rendering

Question

So I have a function that filters whether or not the passed arguments are select, text, or date fields and is added to the render jsx dynamically.

When I fire a return it is not rendering the html/jsx return. I have tested in console.logs instead of the html and it succeeds which tells me the structure for the switch statement is correct and I am passing the right type, just that the html return doesn't want to render. There are no warnings or errors. When I console.log the checkType function I get

There is no warning or error.

Here is a picture of data passed by this.getFields() to verify

// wrapped in a react class

checkType(type, options, placeholder, name, handleUpdatedValue, defvalue, index) {

        let select = <select onChange={handleUpdatedValue.bind(this)} >{options.map((option, i) => <option value={option} key={i}>{option}</option>)}</select>;
        let text = <input onChange={handleUpdatedValue.bind(this)} name={name} placeholder={placeholder} type="text" />
        let date = <input onChange={handleUpdatedValue.bind(this)} name={name} placeholder={placeholder} type="date" />

        switch(type) {
            case 'select':
                return select
                break;
            case 'text':
                return text
                break;
            case 'date':
                return date
                break;
            default: 
                console.log('Error: Invalid Type');
        }
    }

handleSubmit() {

}

render() {

    let values = this.state.fieldValues;
    const checkType = this.checkType.bind(this);

    return(
        <div className="formwrapper thinshadow">    
            <h3>{this.props.header}</h3>
            {this.getFields().map((field, i) => {
                <div key={i} className={field.classes}>
                    {checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}
                    <div className="minilabel"></div>
                </div>
            })}

            <button className="btn btn-primary" 
                    onClick={() => this.props.onClick(values)} >
                    Save
            </button>
        </div>  
    );
}

Answer 1

{this.getFields().map((field, i) => {
         <div key={i} className={field.classes}>
                 {checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}
                 <div className="minilabel"></div>
         </div>
 })}

Your code does not return anything because you are using curly braces inside the function syntax. Either do

{this.getFields().map((field, i) =>
         <div key={i} className={field.classes}>
                 {checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}
                 <div className="minilabel"></div>
         </div>
 )}

or

{this.getFields().map((field, i) => {
        return (
            <div key={i} className={field.classes}>
                    {checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}
                    <div className="minilabel"></div>
            </div>
        );
 })}

For clean code, I would keep the map function outside the JSX tags:

render() {
    let values = this.state.fieldValues;
    const checkType = this.checkType.bind(this);

        const fields = this.getFields().map((field, i) =>
      <div key={i} className={field.classes}>
          {checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}
          <div className="minilabel"></div>
      </div>
        );

    return(
        <div className="formwrapper thinshadow">    
            <h3>{this.props.header}</h3>
                        {fields}

            <button className="btn btn-primary" 
                    onClick={() => this.props.onClick(values)} >
                    Save
            </button>
        </div>  
    );
}