Why i cannot assign values to destructured object variables?

Question

I have form in my website with onSubmit eventListener, so when user submits the form getCurrencyData function is executed. inside getCurrencyData function im checking whether the user entered value or not, if yes then im making apicall and destructuring generalCurrencyInfo object. The problem is that i cannot assign values to destructured object variables.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      generalCurrencyInfo: {
        fullName: undefined,
        name: undefined,
        imageUrl: undefined,
        price: undefined,
        error: false
      }
    }
  }


getCurrencyData = async (e) => {
    e.preventDefault();
    const CURRENCYNAME = e.target.elements.currencyName.value.toUpperCase();
    //Checks if currency name is not empty
    if (CURRENCYNAME) {
      const APICALL = await fetch(`url`);
      const DATA = await APICALL.json();
      let generalCurrencyInfo = {
        fullName:undefined,
        name: undefined,
        imageUrl: undefined,
        price: undefined,
        error: false
      }
//this destructuring doesn't work
      let {fullName, name, imageUrl, price, error} =generalCurrencyInfo;
      if (DATA.Message === "Success") {
        fullName = DATA.Data[0].CoinInfo.FullName;
        name = DATA.Data[0].CoinInfo.Name;
        imageUrl = `url`;
        price = "price";
        error = false;
      } 
      this.setState({
        generalCurrencyInfo: generalCurrencyInfo
      })
    } 
  }
  render() {
    return (

    );
  }
}

Means that, if i write imageUrl = url; It doesn't assign value to imageUrl.console.log(url); displays url value :) — , Apr 12 '19 at 12:52
I think you are getting confused, destructuring takes a *copy* of the object property, when you set it it does not update the original object. — James, Apr 12 '19 at 13:07
Is it possible to destruct object and update original object values? — , Apr 12 '19 at 13:48
In short, no. Closest I can think of would to create a new object using the [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and then overriding the relevant properties e.g. `this.setState({ generalCurrencyInfo: { ...generalCurrencyInfo, fullName: ..., name: ..., imageUrl: ..., ... })`. — James, Apr 12 '19 at 14:00

score 1 · Answer 1 · answered Apr 12 '19 at 12:45

You have created 5 new variables here:

  let {fullName, name, imageUrl, price, error} =generalCurrencyInfo;

Then you have changed this variables, but not generalCurrencyInfo object:

  if (DATA.Message === "Success") {
    fullName = DATA.Data[0].CoinInfo.FullName;
    name = DATA.Data[0].CoinInfo.Name;
    imageUrl = `url`;
    price = "price";
    error = false;
  }

Here you set generalCurrencyInfo, what was not changed:

this.setState({
  generalCurrencyInfo: generalCurrencyInfo
})

This will be fine:

this.setState({
    fullName,
    name,
    imageUrl,
    price,
    error,
})

score 0 · Answer 2 · answered Sep 11 '20 at 07:45

You can just reassign the values to your generalCurrencyInfo object, so no need to destructure:

// reassign values
if (DATA.Message === "Success") {
  generalCurrencyInfo.fullName = DATA.Data[0].CoinInfo.FullName;
  generalCurrencyInfo.name = DATA.Data[0].CoinInfo.Name;
  generalCurrencyInfo.imageUrl = `url`;
  generalCurrencyInfo.price = "price";
  generalCurrencyInfo.error = false;
}


// or using the spread operator 
if (DATA.Message === "Success") {
  generalCurrencyInfo = {
    ...generalCurrencyInfo,
    fullName: DATA.Data[0].CoinInfo.FullName,
    name: DATA.Data[0].CoinInfo.Name,
    imageUrl: `url`,
    price: "price",
    error: false,
  };
}

But if you landed on this page looking to find out how to re-assign a value to a destructured object, you might want to check out this question: Is it possible to destructure onto an existing object? (Javascript ES6)

Why i cannot assign values to destructured object variables?

2 Answers2