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
Post a Comment