CODEWITHSUNDEEP
javascriptreactjs
Mel
Mel

Reputation: 2687

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.

I tried using async await's suggestion below. I can use it to check each of the lines marked 1 and 2 but (and those logs do record the issueGroup) but I cannot use it as a child where shown in 3. That form component wont accept children. Is there a way to check that the issueGroup is known inside the form component?

const CheckIfModalKnowsIssueGroupId = props => {
  console.log("checking if modal knows the issue group", props.toLog);
  return (
    <div>
      {props.children}
    </div>
  );
};

 {  console.log("update knows what the issuegroup is", selectedIssueGroup)}

// If I try using this check above the modal as position #1, I can see that the log records the issueGroup <Modal {...modalPropsUpdate } title="Update Issue Group" >

// If I try using this as position #2 (above the form), I can see that the log records the issueGroup 

   <CheckIfModalKnowsIssueGroupId toLog={selectedIssueGroup}>


<AdminUpdateIssueGroupForm 
                                      onClose={modalPropsUpdate.onClose} 
                                      issueGroup ={selectedIssueGroup} 
                                >

// If I refactor this to try and make the CheckIfModalKnowsIssueGroupId a child of the form, the console does not log anything {console.log("issueGroup inside modal", selectedIssueGroup )}

ALTERNATE for attempt to log in position #3

<AdminUpdateIssueGroupForm 
 onClose={modalPropsUpdate.onClose} 
 issueGroup ={selectedIssueGroup} 
>
  <CheckIfModalKnowsIssueGroupId toLog={selectedIssueGroup} />
    
</AdminUpdateIssueGroupForm>

Upvotes: 2

Views: 2331

Answers (1)

async await
async await

Reputation: 2395

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>

Adding an attempted revision based on your edit:

const CheckingModal = props => {
  const {modalPropsUpdate, title, toLog} = props;
  console.log("checking if modal knows the issue group: ", toLog);
  return (
    <Modal {...modalPropsUpdate} title={title}>
      {props.children}
    </Modal>
  );
};

//... then in use

<CheckingModal 
  modalPropsUpdate={modalPropsUpdate} 
  title="Update Issue Group"
  toLog={selectedIssueGroup}
  >
  <AdminUpdateIssueGroupForm
    onClose={modalPropsUpdate.onClose}
    issueGroup={selectedIssueGroup}
  />
</CheckingModal>

Upvotes: 2

Related Questions