Home:ALL Converter>How to pass data to a popup modal in React

How to pass data to a popup modal in React

Ask Time:2021-05-03T19:16:44         Author:SreRoR

Json Formatter

I want to get the logged user id in a React popup. I'm passing logged_user from MyVerticallyCenteredModal popup function call, but it is not getting when I try to print in popup.

<div className="about">
  <span> logged user id is : {loggedUserid} <span> //here prints id of logged user as 1
  <MyVerticallyCenteredModal logged_user={loggedUserid}
        show={modalShow}
        onHide={() => setModalShow(false)}
      />
</div>



function MyVerticallyCenteredModal(props,{logged_user}) {
const user_id = logged_user;
    console.log("logged in id is ", user_id); // not getting logged user id here(prints undefined)


return (
    <Modal  
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
    <div className="modal-header">
<span>My id is {user_id}</span>//  not getting logged user id here
</div>
</Modal>


}

Author:SreRoR,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/67368038/how-to-pass-data-to-a-popup-modal-in-react
Kiran Mistry :

@SreRoR you need to just passed props in your functional component then only you will access that id you passing from another component.\nlet's take an example\nconst loggedUserid = 1;\n\n<MyVerticallyCenteredModal logged_user={loggedUserid} />\n\nAfter in other function component you have to pass props as an argument like below\nconst MyVerticallyCenteredModal = props => {\n const user_id = props.logged_user; // you not getting id here because you haven't add props.logged_user\n console.log("logged in id is ", user_id);\n\n return (\n <div>\n <hr />\n <h1>\n {"user id ===>"} {user_id}\n </h1>\n </div>\n );\n};\n\nHere is full code Example you can check",
2021-05-03T11:43:20
yy