Compiling Error while using .map function in the TableBody of Material-UI using ReactJS

Question

i am kind of stuck when working on an array of objects, so basically i am looking to make dynamic table using MaterialUI in React, but i am experience an error at <TableRow key={producNumber}> as Expected an assignment or function call and instead saw an expression no-unused-expressions not sure why it is happening as i tried to made a simple TableBody and in that i am going through each object in an array and display it, any suggestions guys.

function Basket({ basketItems, updatedBasket }) {
 console.log(basketItems);

 return (
    <div className="BasketProducts">
      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell> </TableCell>
              <TableCell>Product Name </TableCell>
              <TableCell> Item No.</TableCell>
              <TableCell> StockLevel</TableCell>
              <TableCell> Quantitiy</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {basketItems.map((eachproduct) => {    
              let productName = eachproduct.product_name;
              let producNumber = eachproduct.producNumber;
              let price = eachproduct.price;
              let desc = eachproduct.productDescription;
              let photo = eachproduct.image_URL;
              let stockQuantity = eachproduct.stockQuantity;

              <TableRow key={producNumber}>    // the error is point to this position
                <TableCell>
                  {" "}
                  <img className="BasketProducts-image" src={photo} />{" "}
                </TableCell>
                <TableCell>{productName}</TableCell>
                <TableCell>{productName}</TableCell>
              </TableRow>;
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

the basketItem is array of object as below, there are currently two but it can be more objects

Did you try returning table? as in `return (< TableRow > ... )` — tbuglc, Jul 20 '20 at 14:04

score 1 · Accepted Answer · answered Jul 20 '20 at 14:04

You didnt return anything in map funtion. so try this

{basketItems.map((eachproduct) => {
                          let productName = eachproduct.product_name;
                          let producNumber = eachproduct.producNumber;
                          let price = eachproduct.price;
                          let desc = eachproduct.productDescription;
                          let photo = eachproduct.image_URL;
                          let stockQuantity = eachproduct.stockQuantity;
                          return (
                            <TableRow key={producNumber}>
                              {" "}
                              // the error is point to this position
                              <TableCell>
                                {" "}
                                <img
                                  className="BasketProducts-image"
                                  src={photo}
                                />{" "}
                              </TableCell>
                              <TableCell>{productName}</TableCell>
                              <TableCell>{productName}</TableCell>
                            </TableRow>
                          );
                        })}

Thanks Karani, it does work now. just to understand this return () statement after .map function, why we need this return if we are already usign return at the top to render all inside. sorry maybe silly question but just want to understand as i am new to react. — Umair_007, Jul 20 '20 at 14:12
while you use {} in jsx. it like you can write some javascript in the {}.so, when you use map in vanillaJs you shuld return something. It's the same in this case — Jaswanth Karani, Jul 21 '20 at 15:24

Compiling Error while using .map function in the TableBody of Material-UI using ReactJS

1 Answers1