Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

101
Views
React function return containing dynamic html is not rendering

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

enter image description here

There is no warning or error.

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

enter image description here

// 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>  
    );
}
over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

{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>  
    );
}
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!