javascript - nested if statement jsx -


trying nested if statement or if else if statement in jsx. if there 1 input has label of primary, if there 2 inputs, first 1 has label primary , second 1 has label of secondary , if there more 2 first has label primary, second secondary , 3 going forward have no label.

currently code puts label primary on first , secondary on second add third erases labels. ideas awesome.

  render() {      const { lowertype, currentperson, contact, index, type } = this.props;      const isprimary = index === currentperson.getin(['primaries', lowertype]);      // const secondarylabel = <label><b>secondary</b></label>;      const label = <label><b>{ isprimary ? 'primary' : 'secondary' }</b></label>;      return (        <div classname='field main-item'>          { currentperson.get(`${lowertype}s`).size <= 2 && label }          <input            value={contact}            onchange={this.handleinputchange}            placeholder={`enter ${type === 'email' ? 'an' : 'a'} ${type.tolowercase()}`}            type={type === 'email' ? 'text' : 'tel'}            style={inputright}          />        </div>      );    }

you using below condition, return label if currentperson.get(${lowertype}s).size less or equal 2.

{ currentperson.get(`${lowertype}s`).size <= 2 && label } 

if want don't want erase label, or give text better if instead of using && use tertiary operator on here.

{ currentperson.get(`${lowertype}s`).size <= 2 ? label : 'third label' } 

Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -