hope you are all good.
I have button onclick that call 2 functions BUT it is not working and i dont have any errors displaying in the console, so i don't know where the problem is.
Here is my code
<div className="d-grid gap-2">
<Bouton btnCss = 'btn btn-success my-3'
click= { () => { this.props.handleSubmit; this.setState({begin : true})}}>
Commencer la tâche
</Bouton>
</div>
</form>
</>
)
}
}
export default withFormik({
mapPropsToValues : () => ({
tache : '',
unite : '',
commentaire : ''
}),
validationSchema : Yup.object().shape({
tache : Yup.number()
.required('Choisissez une tâche'),
unite : Yup.number()
.required('Choisissez une unite'),
commentaire : Yup.string()
.min(5, 'Le Texte est trop court')
.required('Veuillez entre un texte')
}),
handleSubmit : (values, {props, resetForm}) => {
resetForm();
props.validation(values.tache, values.unite, values.commentaire);
}
})
(taskForm)
Thank you for your help mates !
Why don't you call one function, that calls the next two functions? Something like this:
handleClick() {
function1();
function2();
}
<Bouton btnCss = 'btn btn-success my-3'
onClick= { () => { this.handleClick() }}>
Commencer la tâche
</Bouton>
You can always add async/await if you need to wait for the 1st one to complete before you fire the 2nd one. 🙂
You are not calling your this.props.handleSubmit
It should be this.props.handleSubmit()
When you were previously calling your function you were using:
<Bouton click= {this.props.handleSubmit}>Commencer la tâche</Bouton>
You were in fact passing to your custom component a reference to the function that will be called when the button is clicked.
The button then calls the function. You could say the onClick function adds the ()
Like you would when you're getting a callback in your arguments:
const functionWithACallback = (callback) =>
{
// Do stuff
callback();
}
However now what you are doing is passing an anonymous function to be called when your button is clicked. You're passing:
() => {
this.props.handleSubmit;
this.setState({begin : true})
}
However here, this.props.handleSubmit is never called.
Also comments made and the other answer are the good practices to follow namely:
onClick instead of click.handleClick and call it when your button is clicked to keep your return statement as lean as possible.