No render elements from array - ReactJS

Question

Project based on Typescript vs ReactJS.

This is render code :

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>
           );

In debugger I can see that 'elements' are not empty but it doesn't render in html.

Any suggestion ?!

codeepic · Accepted Answer · 2018-09-12 11:31:56Z

1

You need an extra return statement: Change: sectionsItem.elements.map to return sectionsItem.elements.map: Your inner .map returns elements but the outer .map has no return statement:

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>
       );

answered Sep 12, 2018 at 11:31

codeepic

4,1528 gold badges39 silver badges60 bronze badges

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

Collectives™ on Stack Overflow

No render elements from array - ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related