How to use console log inside a react form component

I am trying to figure out how to communicate with a react form so that I can give it an object.id to update.

I can console.log the object.id inside the update button, and inside the modal generally, but I am trying to figure out if I have properly communicated that value to the form that is opened when the edit button is clicked. I can’t find a way to format the request to use console.log inside that form component. I am trying as follows:

<Button>
    aria-label='Update Issue Group'
    // onClick={modalPropsUpdate.onOpen}
    onClick={() => {
      setSelectedIssueGroup(issueGroup)
      modalPropsUpdate.onOpen()
    }}
    _hover={{
      backgroundColor: "brand.blue",
      color: "brand.white",
    }}
    />
    {  console.log("update knows what the issuegroup is", selectedIssueGroup)}
    <Modal {...modalPropsUpdate } title="Update Issue Group"  >

        <AdminUpdateIssueGroupForm
            onClose={modalPropsUpdate.onClose}
            issueGroup ={selectedIssueGroup}
            // what is the format to ask to console log the value of issueGroup at this point?  
        />
        {console.log("issueGroup inside modal", selectedIssueGroup )}
    </Modal>
</Button>
                                

I have tried adding {} and () and cannot find a format that works.

>Solution :

If it helps conceptualize, here’s a function you could use. I create a component which returns a div (in your case it would return a Modal component), passing on the children, but logging the toLog property before rendering the content. You could even pass a callback function instead of a variable explicitly to log. Hopefully this makes it more clear!

Something like this:

const {useState} = React;

const LoggingModal = props => {
  console.log(props.toLog);
  return (
    <div>
      {props.children}
    </div>
  );
};

const Example = () => {
  const [issueGroup, setIssueGroup] = useState(0);
  const incrementGroup = () => setIssueGroup(issueGroup + 1);
  return (
    <LoggingModal toLog={issueGroup}>
      <div onClick={incrementGroup}>On issue group {issueGroup}</div>
    </LoggingModal>
  );
};

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <Example />
);

* {
  user-select: none;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>