Нет элементов рендеринга из массива - ReactJS

Question

Проект на основе Typescript против ReactJS.

Это код рендеринга:

return (
            <div ref={this.myRef} style={this.state.myStyle} >
              {this.state.sections.map((sectionsItem: AppI.SectionI) => {
                if (this.state.activeSection === sectionsItem.name) {
                  console.log("TEST :", sectionsItem.elements );
                  sectionsItem.elements.map((element: React.ReactElement<any>, index: number) => {
                    return <span key={index} >{element}</span>;
                  });
                }
              })}
            </div>
           );

В отладчике я вижу, что «элементы» не пустые, но этоне отображается в html.

Есть предложения?!

Answer 1

Вам нужен дополнительный оператор return: измените: sectionsItem.elements.map на return sectionsItem.elements.map: ваш внутренний .map возвращает элементы, но внешний .map не имеет оператора возврата:

return (
        <div ref={this.myRef} style={this.state.myStyle} >
          {this.state.sections.map((sectionsItem: AppI.SectionI) => {
            if (this.state.activeSection === sectionsItem.name) {
              console.log("TEST :", sectionsItem.elements );
              return sectionsItem.elements.map((element: React.ReactElement<any>, index: number) => {
                return <span key={index} >{element}</span>;
              });
            }
          })}
        </div>
       );