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.
   

CodePudding user response：

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>