渲染条件表单元素

Question

I have a select (aka picklist) field on a form . Based on its value, it affects the next field (dependent field), which is either: another select, input type text, or disabled input.

The pseudocode

// based on a state value, leadField, determine valueField

// if leadField === null, return a disabled input
// else, go through the array of leadField values

// if a leadFieldValue === leadField
// then go through leadFieldValue

// if leadFieldValue.pickListValues is not empty
// render the select options
// else render an input type text

The code

  renderValueField() {
    if(this.state.leadField === null) {
            return <input type="text" id="input1" className="slds-input" disable/>
    } else {
      return this.props.territoryCriteriaFields.map((criteriaField) => {
        const shouldRender = criteriaField.name === this.state.leadField;
        if (shouldRender) {
          if (typeof criteriaField.pickListValues !== 'undefined' && criteriaField.pickListValues.length > 0) {
            return criteriaField.picklistValues.map((option) => {
                return (
                  <option value={option.value}>{option.label}</option>
                );
            });
          } else {
            return <input type="text" id="input1" className="slds-input" />
          }
        } 
      });      
    }
  }

My problem: when I call the above {this.renderValueField} on the page, it needs to be between <select> 's when pickListValues !== null , like so

<select>
 {this.renderValueField()}
</select>

but I need the <selects> 's to not be there if an input is rendered.

tl;dr - conditionally add remove the <select> tags, depending on the return values of my renderValueField()

Answer 1

You can wrap the <option> s in a <select> inside the function:

renderValueField() {
  if(this.state.leadField === null) {
    return <input type="text" id="input1" className="slds-input" disable/>
  } else {
    return this.props.territoryCriteriaFields.map((criteriaField) => {
      const shouldRender = criteriaField.name === this.state.leadField;
      if (shouldRender) {
        if (typeof criteriaField.pickListValues !== 'undefined' && criteriaField.pickListValues.length > 0) {
          return (
            <select>
              {criteriaField.picklistValues.map((option) => {
                return (
                  <option value={option.value}>{option.label}</option>
                );
              })}
            </select>
          );
        } else {
          return <input type="text" id="input1" className="slds-input" />
        }
      } 
    });      
  }
}