CODEWITHSUNDEEP
javascriptreactjsdestructuring
user10669692
user10669692

Reputation:

Why i cannot assign values to destructured object variables?

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 (

    );
  }
}

Upvotes: 2

Views: 495

Answers (2)

Wietse de Vries
Wietse de Vries

Reputation: 673

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)

Upvotes: 0

Uladzislau Ulasenka
Uladzislau Ulasenka

Reputation: 582

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,
})

Upvotes: 1

Related Questions