Вопросы об одной строке React кода?

Question

[georgedubinsky8888]

Здраствуйте. Изучаю JS и React, и хочу понять одну строчку кода которую не очень понимаю.
Есть код реализующий вкладки:

const items = [
  {content: 'London'},
  {content: 'Paris' } 
];

class Content extends React.Component {
  render() {
    return (
      <div className="content">
        <p>{this.props.content}</p> 
      </div>
    );
  }
}

class Tabs extends React.Component {
  state = {
    active: 0,
  }

  open = (e) => {
     this.setState({
        active: +e.target.dataset.index,
     });
  }
  
  render() {
    return (
      <div>
        
        <div className="tab">
        
          {this.props.items.map((n, i) => (
            <button onClick={this.open} data-index={i}>{n.content}</button>
          ))}
        </div>

        {this.props.items[this.state.active] && <Content {...this.props.items[this.state.active]} />}

      </div>
    );
  }
}

ReactDOM.render(<Tabs items={items} />, document.getElementById('root'));

И у меня вопросы об этой строке:

{this.props.items[this.state.active] && <Content {...this.props.items[this.state.active]} />}

1) Почему до оператора && пишем не просто this.state.active а this.props.items[this.state.active]? Для чего это нужно?
2) Почему после оператора && не написано просто <Content atr={this.props.items} />. Зачем повторяется то что слева написано от оператора &&? Тоесть почему именно так написан здесь код?

Answer 1

[McBernar]

1. Это номер элемента массива items. В active пишется номер вкладки, как я понимаю.
2. В контент передаются пропсы активной вкладки. См. пункт 1. Очевидно, что все пропсы туда передавать не нужно.

Answer 2

[Ice]

1. Проверяется наличие this.state.active в this.props.items, если true, выполняется вторая часть. (если false - вторая часть не выполняется)
2. После того как мы проверили что данные есть this.props.items[this.state.active], они деструктиризируются в те пропсы которые там описаны (это могут быть не atr)

Answer 3

[EVG]

Судя по приведеному коду:
1. В this.state.active хранится индекс текущего активного айтема.
2. Через this.props.items в компонент прокидвыается массив айтемов, с которыми нужно работать.
3. Могут сойтись звезды так, что this.state.active будет иметь значение, выходящее за пределы массива this.props.items (самое первое предположение о природе данной проверки). В этом случае конструкция this.props.items[this.state.active] вернет значение undefined,
4. Далее в работу включается оператор &&, в случае когда (false && чтото_там_еще), выигрывает то, что справа. Оператор && сперва стратается привести значение слева к булевому, по одному определенному алгоритму приведения, в частности undefined приводится к значению false. Таким образом, конструкция будет исполнена только если this.props.items[this.state.active] не вернет undefined/null/0/''/false.
5. Конструкция {...this.props.items[this.state.active]} говорит о том, что все свойства возвращенного объекта нужно вставить как пропсы в создаваемый Content