How can I do destructuring assignment in Reactjs?

Question

I have the following function.

 returnStateElement = (...elements) => {
    const copy = Object.assign({}, this.state);
    return elements.reduce((obj, key) => ({ ...obj, [key]: copy[key] }), {});
  };

Working:

f = () => {
const dataSender = this.returnStateElement('email', 'password');
let { email, password } = dataSender;
console.log(dataSender,email,password);
}

Not working:

f2 = () => {
const { email, password } = dataSender = this.returnStateElement('email', 'password');
console.log(dataSender,email,password);
}

Is there a way to make a more compact type of assignment like f2()?

Can't reproduce this - I tried this in the console: `const { x, y } = z = { x: 5, y: 6 };`, which works fine — Duncan Thacker, Jan 30 '20 at 14:07
It can be a dumb question but why would you need a middle variable on this assignment? — Evandro Cavalcate Santos, Jan 30 '20 at 14:11
I know, but what I need is to check certain fields not all what I take from the returnStateElement function and then pass all the values that are inside the main function ie dataSender send them via fetch. — Paul, Jan 30 '20 at 14:12
@adiga: in the function f2(), there is no visibility of the variable, it is not seen. — Paul, Jan 30 '20 at 14:36
You cannot do this in one line. You should use `f` because it's easily readable. There is no difference in performance in using 2 separate lines so there's nothing to be gained from this. In `f2`, `dataSender` is created as a global varaible because you don't use `const`. Only one liner solution is to use a comma in between `const dataSender = this.returnStateElement('email', 'password'), { email, password } = dataSender` but that's not a big improvement over what you already have — adiga, Jan 30 '20 at 14:42

score -1 · Answer 1 · answered Jan 30 '20 at 14:07

-1

The following should work, you don't have to assign the results to an intermediate variable, you just need to provide the exact names that are in the returned object

f2 = () => {
const { email, password } = this.returnStateElement('email', 'password');
console.log(dataSender,email,password);
}

Example

const foo = () => {
    return {
    'a': '1',
    'b': '2'
  }
}

const bar = () => {
    const { a, b } = foo();
  console.log(a)
  console.log(b)
}

bar();
// Logs 1, 2

answered Jan 30 '20 at 14:07

wizloc

2,202
4
28
54

I know, but what I need is to check certain fields not all what I take from the returnStateElement function and then pass all the values that are inside the main function ie dataSender send them via fetch. – Paul Jan 30 '20 at 14:11
This works and answers your question as it is worded, not sure why the downvote. But I'm sure this is a waste of time, you asked a question just yesterday how to get your function to work and I provided a working answer and you gave zero feedback, but I see you are using it now. https://stackoverflow.com/questions/59968644/react-js-pass-a-function-this-state-context/59969501#59969501 – wizloc Jan 30 '20 at 14:14

Zohaib Ijaz · Answer 2 · 2020-01-30T14:21:09.737

-1

f2 = () => {
  const { email, password, ...rest } = this.returnStateElement('email', 'password');
  console.log(email,password, rest);
  // you can combine all like
  console.log({...rest, email, password });
}

edited Jan 30 '20 at 14:21

answered Jan 30 '20 at 14:12

Zohaib Ijaz

21,926
7
38
60

I know, but what I need is to check certain fields not all what I take from the returnStateElement function and then pass all the values that are inside the main function ie dataSender send them via fetch. – Paul Jan 30 '20 at 14:12

How can I do destructuring assignment in Reactjs?

2 Answers2