how to call two functions with or without wrapping arrow function - reactjs

Question

import{useState } from 'react'
export const useForm=(callback, initialState={})=>{
const [values, setvalues] = useState(initialState)
const onChange=(event)=>{
setvalues({...values,[event.target.name]:event.target.value})
}
const onSubmit= event =>{
callback();
}
return{
onChange,
onSubmit,
values
}
}
function createPostCallback(){
createPost();
}
const [open, setOpen] =useState(false)
return (
<Modal
as={Form}
onSubmit={onSubmit}
this works fine but when i change this to {onSubmit&&setOpen(false)} it says too many renders, so i wrapped an arrow function like this
{()=> {onsubmit()&&setOpen(false)}} but only the onSubmit function
works and if i changed it to {()=> {setOpen(false)&&onSubmit()}} only
setOpen works..what am i doing here how to solve this !!
open={true}
dimmer={'blurring'}
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
open={open}
trigger={<i class="circular add icon" ></i>}
>
<div>
<Image size='medium' src='/images/avatar/large/rachel.png' wrapped />
<TextArea
rows={2}
placeholder="whats on ur mind..?"
name="body"
onChange={onChange}
value={values.body}
>
</TextArea><Modal.Actions>
<Button type="submit" color="instagram">post</Button>
</Modal.Actions>
</div>
</Modal>
)
}

Answer 1

For the clean code i would recommend for you to do another function that call both functions:
function onSubmitAndSetOpenFalse() {
onSubmit();
setOpen(false);
}
...
onSubmit={onSubmitAndSetOpenFalse}
or you can do like Shri Hari told
onSubmit={() => { onSubmit(); setOpen(false); }}
Both will work.

Answer 2

I think you just need to call the function without the && operator.
onSubmit={() => { onSubmit(); setOpen(false); }}
Hope that works!