Why Map value are not displaying inside modal body in react bootstrap

Question

I have a requirment, when i click on a button i should display a modal popup box using react bootstrap.

But the value is not displaying inside modal body.

when I puted log, in the console it is printing all the values. But the same value I want to try to print on the modal body is not printing.

here is the sample code ` function MyVerticallyCenteredModal(props) {

return (

  <Modal scrollable={true}
     {...props}
     size="lg"
     aria-labelledby="contained-modal-title-vcenter"
     centered
  >
     <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
           Order Id - {props.order.orderId}
        </Modal.Title>
        
     </Modal.Header>
     <Modal.Body>
        <table>
           <tbody>
              {
                 
                 props.order.foods.map((food,id)=>{
                    console.log(food);
                    <tr>
                       <td>{food}</td>
                    </tr>
                 })
              }
           </tbody>
        </table>
     </Modal.Body>
     <Modal.Footer>
        {/* <Button onClick={props.onHide}>Close</Button> */}
     </Modal.Footer>
  </Modal>

); }`

1. Can anyone help me how to solve this problem

    Thanks in advance.
   

Answer 1

you have not used return in your code, that's why your map does not return anything, try this,

 <tbody>
              {
                 
                 props.order.foods.map((food,id)=>{
                    console.log(food);
                   return (
                       <tr>
                         <td>{food}</td>
                       </tr>
                        )
                 })
              }
           </tbody>