Why are my variables empty on first click Apollo Client React? - reactjs

Question

I am trying to call useMutation when I click on the "Save" button on a modal. However, the first time I click it, the variables which get sent are empty (i can see the variables in the network calls tab and all are undefined) even though when I do a console.log I can see the data.
I.e
let globalState = {};
const SessionAdd = () => {
console.log(globalState); // This always displays the correct data when I click on the "Save" button.
const [AddsessionInput, {error} ] = useMutation(addSession,{
variables: {
title:String(globalState.title),
description:String(globalState.description)
}
});
return (
<div className="AddSession">
<Button variant="primary" onClick={handleShow}>
<i className='fas fa-plus' /> Create a new Session
</Button>
<Modal show={show} onHide={handleClose} size="md">
<Modal.Header closeButton>
<Modal.Title><i className='fas fa-camera' /> Create details</Modal.Title>
</Modal.Header>
<Modal.Body> <AddSessionForm /> </Modal.Body>
<Button variant="primary" onClick={AddsessionInput}>
Save
</Button>
</Modal.Footer>
</Modal>
</div>
);
}
const AddSessionForm = () =>{
const [sessionDetails, setSessionDetails] = useState({
title:""
});
const handleSessionDetails = (evt) => {
sessionDetails[evt.target.name] = evt.target.value;
setSessionDetails(sessionDetails);
globalState = sessionDetails;
};
return(
<div>
<p><strong>Add title</strong></p>
<FormControl name="title"
onChange={handleSessionDetails}/>
<br/>
);
}
Is this the correct way to handle states when dealing with a parent component (i.e handling objects in child components from parent state)?
Thanks

Answer 1

I'd probably refactor it slightly:
const [AddSessionInput, {error}] = useMutation(QUERY_STRING);
const runAddSessionInput = async () => {
await AddSessionInput({ variables });
};
In your onClick:
return (
<Button variant="primary" onClick={runAddSessionInput} />
);