CODEWITHSUNDEEP
javascriptreactjsfunction
Neff
Neff

Reputation: 189

How correctly call multiple functions ReactJS

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>

Upvotes: 0

Views: 53

Answers (1)

Drew Reese
Drew Reese

Reputation: 203512

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>

Upvotes: 1

Related Questions