如何在循环内打印功能组件-React JS

Question

I want to print my functional component inside a loop. but I got this error:

SyntaxError: Unexpected token, expected

my code:

render(){
 ...

return (

...


    { this.state.coupons.length > 0 ? (

                                    Object.keys(reducedData).map(obj => {

                                              var row = {} ;
                                              row.title = '';
                                              row.coupon_code = '';
                                                reducedData[obj].map(item =>
                                                    {
                                                      row.title = item.title;
                                                      row.coupon_code += item.coupon_code;
                                                    }

                                                     {<MyShadyabsRow  row={row}/>}


                                              )
                                        })

                                  ) : (
                                    <tr></tr>
                                  )

                                  }

...

)

}

my error line is at this line:

{<MyShadyabsRow  row={row}/>}

my functional component:

import React from ‘react’;

const MyShadyabsRow = ({row}) => (
  <tr>
      <td>
          <a href="#">
              <i className="fa fa-print" aria-hidden="true">
                  <span>پرینت</span>
              </i>
          </a>
      </td>
      <td>{row.title}</td>
      <td>۱۳۹۶/۱۰/۱۰</td>
      <td>{row.coupon_code}</td>
  </tr>
);

export default MyShadyabsRow;

Answer 1

actually what are missing is the return statement inside the render and also the different closures of the functions are not correct, for example:

                                            reducedData[obj].map(item =>
                                                {
                                                  row.title = item.title;
                                                  row.coupon_code += item.coupon_code;
                                                }

                                                 {<MyShadyabsRow  row={row}/>}
                                          )

as you may see, you are closing the `(item => {....} ) which is not corret.

this.state.coupons.length > 0 ? (
        Object.keys(reducedData).map(obj => {
            let row = {};
            row.title = '';
            row.coupon_code = '';
            reducedData[obj].map(item => {
                row.title = item.title;
                row.coupon_code += item.coupon_code;
            })
            //this will return the object after the map is applied.
            //the error was on the closure of your code and the use of {} wrapping your component.
            return (<MyShadyabsRow  row = { row } />)
        })): (
            <tr></tr>
        )

Answer 2

The line in question is indeed wrong. You need to return the component, and right now you're just wrapping it in curly brackets, which makes no sense in that context.

That faulty line should instead be

return <MyShadyabsRow  row={row}/>;

I'm assuming you want to render one MyShadyabsRow component for each key in reducedData .

Answer 3

Map function will return multiple components and since you have outer object key it will iterate again. So from map function you cannot render JSX component you map compenent to each element of array. that is why bracket syntax is not valid.

{ this.state.coupons.length > 0 ? (
   Object.keys(reducedData).map(obj => {
       var row = {} ;
       row.title = '';
       row.coupon_code = '';
       return reducedData[obj].map(item =>
                                   {
                                      row.title = item.title;
                                      row.coupon_code += item.coupon_code;
                                      return (<MyShadyabsRow  row={row}/>)
                                    }





                                   )
        })

Answer 4

Your {<MyShadyabsRow row={row}/>} is inside the map function

reducedData[obj].map(item =>{
      row.title = item.title;
      row.coupon_code += item.coupon_code;
      return (<MyShadyabsRow  row={row}/>);
)