I'd like to define an new array containing two values of state. This array will be send to the api. My first approach which was working fine, at first, was:

const userRoles = {
  userName: this.state.userName,
  roles: this.state.userRoles
};
putData('api/User/EditUserRoles', userRoles).then((result) => {
  const responseJson = result;
  if (responseJson) {
    this.setState({ msg: "User's roles updated successfully!" });
  }
});

but after i've enabled eslint - react/destructuring-assignment the following errors appeared:

1. (property) userName: string Must use destructuring state assignmenteslintreact/destructuring-assignment
2. (property) userRoles: string[] Must use destructuring state assignmenteslintreact/destructuring-assignment

so i changed the code to

const { userName, userRoles } = this.state;
const userNameBuffer = userName;
const userRolesBuffer = userRoles;
const userRolesArrayBuffer = {
  userName: userNameBuffer,
  roles: userRolesBuffer
};
putData('api/User/EditUserRoles', userRolesArrayBuffer).then((result) => {
  const responseJson = result;
  if (responseJson) {
    this.setState({ msg: "User's roles updated successfully!" });
  }
});

which workes, but i'm not happy about using the additional "buffer" variables. Is there a way to write this code more "handsome" (e.g. no "buffer" variables) with consideration of react/destructuring-assignment?

Thank you for every answer and sorry for any mistakes in my english that may occur.

CodePudding user response：

you dont need to save vars in buffer, more elegant and common way is:

const { userName, userRoles } = this.state;
const userRolesBuffer = {
  userName, // its not mistake, in object variables with same name can be assigned like this
  roles: userRoles
};
putData('api/User/EditUserRoles', userRolesBuffer).then((result) => {
  const responseJson = result;
  if (responseJson) {
    this.setState({ msg: "User's roles updated successfully!" });
  }
});

CodePudding user response：

Well the answer seems pretty easy and i misunderstood something.

I thought it's necessary to declare an array like

const exampleArray = {
    key1: "value1",
    key2: "value2"
}

that the result of JSON.stringify(exampleArray); looks like

{
     "key1": "value1",
     "key2": "value2"
}

but it seems like that

const key1 = "value1";
const key2 = "value2";
const exampleArray = {
      key1,
      key2,
}

does return the the same result...

so my code, matching react/destructuring-assignment finally looks like

const { userName, userRoles } = this.state;
const roles = userRoles;
putData('api/User/EditUserRoles', { userName, roles }).then((result) => {
  const responseJson = result;
  if (responseJson) {
    this.setState({ msg: "User's roles updated successfully!" });
  }
});

Thank you for your answers... especially Pavlo Demydiuk ^^