nested if statement jsx

Question

trying to do a nested if statement or if else if statement in jsx. essentially if there is 1 input it has the label of Primary, if there are 2 inputs, the first one has label primary and second one has label of Secondary and if there are more than 2 the first has label as Primary, second as Secondary and 3 going forward have no label.

Currently my code puts label Primary on the first and Secondary on the second but as soon as I add a third it erases all labels. Any ideas would be 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>
    );
  }

const label = <label><b>{ isPrimary ? 'Primary' : 'Secondary' }</b></label>; return ( <div className='field main-item'> { currentPerson.get(${lowerType}s).size <= 2 && label } — StuffedPoblano
– StuffedPoblano, Commented Jul 28, 2017 at 15:07

Anurag Singh Bisht · Accepted Answer · 2017-07-28 14:42:02Z

1

You are using the below condition, which will return the label only if currentPerson.get(${lowerType}s).size is less than or equal to 2.

{ currentPerson.get(`${lowerType}s`).size <= 2 && label }

If you want don't want to erase the label, or give another text it would be better if instead of using && you use tertiary operator over here.

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

answered Jul 28, 2017 at 14:42

Anurag Singh Bisht

2,7514 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

StuffedPoblano Over a year ago

this seems closer to what I want to do, but it still removed the Primary and Secondary label from the first 2 inputs. What I am aiming for is <label>Primary</label> <input/> <label>Secondary</label> <input/> <input/> <input/> .... so any inputs added after the 2nd one do not have a label.

Anurag Singh Bisht Over a year ago

then you should just put { label }. Why you are using the condition if you dont want to remove the label ??

StuffedPoblano Over a year ago

Where do I put the { label } ? The condition I thought was necessary because there is always 1 input which will have the label of Primary, when a second input is added, it is given the label of Secondary and when a third, fourth, fifth, input is added it just falls under the same label as the Secondary rather than have their own labels.

Anurag Singh Bisht Over a year ago

If you want more control, you can just use a function which returns the JSX and call it inside {}.

StuffedPoblano Over a year ago

oh really? How would that be done? Sorry, newer to this JSX react/redux stuffs.

|

Collectives™ on Stack Overflow

nested if statement jsx

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related