How correctly call multiple functions ReactJS

Question

I would like to explain my problem of the day.

currently, I have 2 functions that work proper

I wish I could have both functions on one button

When they are separated the functions work correctly, my problem and when I try to pass them on a single button I have an error that appears "Cannot read property 'preventDefault' of undefined"

How can I fix this issue?thx all

make room for the code

my first function

putBack = (e, id) => {
e.preventDefault();
const config = {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ id: id, livree: new Date().toISOString().slice(11, 16)}),
};
const url = entrypoint + "/alluserpls";
fetch(url, config)
.then(res => res.json())
.then(res => {
if (res.error) {
alert(res.error);
} else {
alert(`ajouté avec l'ID ${res}!`);
}
}).catch(e => {
console.error(e);
}).finally(() => this.setState({ redirect: true })); }

my second function

onChange = (id, status) => {
const validatedorder = JSON.parse(localStorage.getItem("validated-order") || "{}");
localStorage.setItem("validated-order", JSON.stringify({ ...validatedorder, [id]: status }))

this.setState({ color: 'red' });
this.setState({ title: 'Confirmer la livraison' });

console.log('cliqué pour preparation')
this.setState({
  statut :'preparation',
  id,
});
}

my multiple functions

megaTryMulti(e){
e.preventDefault();
this.putBack();
this.onChange();
}

function separate. (that work )

<form onSubmit={(e) => this.putBack(e, datass.id)}>
   <button type="submit">PUT</button>
</form>

second function separate (that work)

<Button style={{ backgroundColor: status === undefined || status === false ? "red" : "#4DD5C7" }} disabled={status === false} onClick={() => this.onChange(datass.id, !status)} className="buttonForLancerMaybe">{status === undefined ? "Lancer" : status === true ? "Confirmer la livraison" : "SERVI"}</Button>

multi function ( that is my problem and she don't works )

  <form onSubmit={(e) => this.megaTryMulti(e)}>  
     <Button type="submit">test</Button>
   </form>

Both of your functions expect arguments, megaTryMulti isn't passing any. This isn't a React problem or even specific to JavaScript; if you want functions to work correctly you need to pass in the things that they require. — jonrsharpe
– jonrsharpe, Commented Jun 4, 2020 at 7:31
@jonrsharpe could you give me more explanation, if my function works alone? what am i missing so that it works in multi? — Neff
– Neff, Commented Jun 4, 2020 at 7:40
You're missing the arguments to those functions. Compare how you're calling them in megaTryMulti to how you call them when they work. — jonrsharpe
– jonrsharpe, Commented Jun 4, 2020 at 7:41
@jonrsharpe are you talking about that? or nothing to see? <Button type submit style={{ backgroundColor: status === undefined || status === false ? "red" : "#4DD5C7" }} disabled={status === false} className="buttonForLancerMaybe">{status === undefined ? "Lancer" : status === true ? "Confirmer la livraison" : "SERVI"}</Button> — Neff
– Neff, Commented Jun 4, 2020 at 7:50
Well what you've posted there doesn't call either of those functions, so what do you think? — jonrsharpe
– jonrsharpe, Commented Jun 4, 2020 at 7:52

Drew Reese · Accepted Answer · 2020-06-04 07:51:28Z

1

You need to pass all the arguments that putBack and onChange expect to receive to megaTryMulti, to be passed on. putBack takes the form onSubmit event and an id, and onChange takes the same id and a status

megaTryMulti(e, datass, status){
  e.preventDefault();
  this.putBack(e, datass.id);
  this.onChange(datass.id, !status);
}

Usage:

<form onSubmit={(e) => this.megaTryMulti(e, datass, status)}>  
  <Button type="submit">test</Button>
</form>

answered Jun 4, 2020 at 7:51

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

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

Collectives™ on Stack Overflow

How correctly call multiple functions ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related