How to insert an attribute from a function into an object property?

Question

JavaScript

Good afternoon.
Started learning React and ran into a problem.
There are two functions, one adds likes, the other stars for ratings.

this.onToggleLike = (id) => {
  this.setState(({data}) => {
    const index = data.findIndex(elem => elem.key === id);
    const old = data[index];
    const newElem = {...old, like: !old.like};
    const newArr = [...data.slice(0, index), newElem, ...data.slice(index + 1)];
    return {
      data: newArr
    }
  });
}

this.onToggleImportant() = (id) => {
  this.setState(({data}) => {
    const index = data.findIndex(elem => elem.key === id);
    const old = data[index];
    const newElem = {...old, important: !old.important};
    const newArr = [...data.slice(0, index), newElem, ...data.slice(index + 1)];
    return {
      data: newArr
    }
  });
}

As you can see, in both functions it differs in the newElem constant like and important.

I decided to make one function and use it.

this.toggleElemInData = (el, id) => {
  this.setState(({data}) => {
    const index = data.findIndex(elem => elem.key === id);
    const old = data[index];
    const newElemProps = {
      el: !old[el]
    };
    const newElem = {...old, ...newElemProps};
    const newArr = [...data.slice(0, index), newElem, ...data.slice(index + 1)];
    return {
      data: newArr
    }
  });
}

this.onToggleImportant = (id) => {
  this.toggleElemInData('important', id);
}

this.onToggleLike = (id) => {
  this.toggleElemInData('like', id);
}

Only, for some reason, the el attribute is not inserted as a property for newElem for me.


Do not judge strictly, javascript is difficult for me.

Thanks in advance for your reply.

Answer 1

const newElemProps = {
  [el]: !old[el]
};