CODEWITHSUNDEEP
reactjsredux
R9102
R9102

Reputation: 727

Getting some syntax error while mapping-reactjs

is this the right way to map the function inside the render

Here is my rendring code.

render() {
const { boardList } = { ...this.props.storyboardList };
const widgetListData = [...this.props.storyboardList.boardList].map(x => x.widgetList);
widgetListData.map((widgetresult, i) => {

return (

 <div className="clearfix">
   {this.state.isHidden ? (
  <div className="widget-list-wrapper clearfix">
    {this.state.widgetsList.length >= 0 ? (
   <div>
   <section className="section-break">
     {this.renderWidgets(widgetresult)}
    </div>
    </div>
    </section>
    )
    }
    }

Upvotes: 1

Views: 188

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281734

First of all, since you are only using the state for render purposes only, you don't need to clone it using spread syntax. Cloning is needed when you want to modify the state,

Second, you are not returning anything from within render

Third, your syntaxes are not correct, since you are not properly closing tags or returning null from conditional render.

render() {
     const { boardList } = this.props.storyboardList;
     const widgetListData = boardList.map(x => x.widgetList);
     // note the return statement here
     return (
       <div>
       {widgetListData.map((widgetresult, i) => {
          return (
               <div className="clearfix">
                   {this.state.isHidden ? (
                      <div className="widget-list-wrapper clearfix">
                          {this.state.widgetsList.length >= 0 ? (
                               <div>
                                  <section className="section-break">
                                     {this.renderWidgets(widgetresult)}
                                  </section>
                                </div>
                           ) : null}
                      </div>
                   ): null}
              </div>
          )
    })}
    </div>
   )
}

Upvotes: 1

Will
Will

Reputation: 782

This is saving over itself. You don't need to convert it into an object.

let widgetresult = {}; 
for (let i = 0; i < widgetListData.length; i++) { 
    widgetresult = widgetListData[i]; 
}

You need to use the array and map over when creating your widgets:

var widgets = widgetListData.map((widgetresult, i) => {
    //then call your widget builder below
    renderWidgets(widgetresult);
}

In you render

{widgets}

Upvotes: 2

Related Questions