How to prevent rendering if there is no parent?

Question

React

There is a task to fix a bug in the code. The essence of the application is booking a room at airports and if there is no parent, then only a child cannot be booked. Task: it is necessary to set a condition in the code to prohibit the rendering of lines with "kid" and "baby" if the "grown" array is empty.

renderPassangers() {
    const hall = this.props.hall;
    if (!hall.grownCount && !hall.babyCount && !hall.kidCount) return null;

    return (
      <div>
        <div>
          <h4 className="pb5">Данные пассажиров</h4>
          <small>Укажите имена пассажиров латинскими буквами, как в авиабилетах</small>
        </div>

        { this.renderMemberGroup('grown', 'Взрослый', !hall.kid.length && !hall.baby.length) }
        { this.renderMemberGroup('kid', 'Ребенок', !hall.baby.length) }
        { this.renderMemberGroup('baby', 'Младенец', false) }

        <hr className="hr"/>
      </div>
    );
  },

Answer 1

Add a condition like `hall.grown.length > 0` as a third parameter, if I misunderstood this method, then it will be enough to put this condition before the string rendering method and merge it through a ternary

Answer 2

In my opinion the best way is to use shouldComponentUpdate