Perform 2 functions OnClick ReactJS

Question

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 !

Is any of the functions running at all? Also why not incorporating the second function with handleSubmit — Jorge Guerreiro
– Jorge Guerreiro, Commented Jan 26, 2022 at 13:12
@JorgeGuerreiro functions are working great, but i can't do this.setstate in the handleSubmit, i have an error cant access it — Mishimaster
– Mishimaster, Commented Jan 26, 2022 at 13:14

SamiElk · Accepted Answer · 2022-01-26 13:41:27Z

1

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:

You should follow the react naming conventions and name your button click handler onClick instead of click.
You should create a separate function named handleClick and call it when your button is clicked to keep your return statement as lean as possible.

edited Jan 26, 2022 at 13:41

answered Jan 26, 2022 at 13:13

SamiElk

2,3829 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mishimaster Over a year ago

Hoow ?? Yes it did work finally but when i called just this.props.handleSubmit it worked fine, but not the second function and now i add this.props.handleSubmit() and it worked im kinda lost

SamiElk Over a year ago

I edited my answer with further explanations.

tsamridh86 · Accepted Answer · 2022-01-26 13:16:53Z

1

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. 🙂

edited Jan 26, 2022 at 13:16

answered Jan 26, 2022 at 13:13

tsamridh86

1,49612 silver badges23 bronze badges

2 Comments

Jorge Guerreiro Over a year ago

This won't work, onClick would

SamiElk Over a year ago

No it won't because Bouton is a custom component.

Collectives™ on Stack Overflow

Perform 2 functions OnClick ReactJS

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related