Как исправить Uncaught TypeError: Cannot read properties of undefined (reading '0')?

Question

[JAdeShopKeepers]

я хочу отрендерить кнопки на странице на вальном JS:

const weekDays = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
const habits = [
  {
    img: './assets/img/habit-1.svg',
    name: 'No Smoking',
    completed: [true, false, true, false, false, false, false],
  },
];
const toggleDayButton = ({ habitName, index }) =>
  render(
    habits.map((habit) => {
      if (habit.name === habitName) {
        habit.completed[index] = !habit.completed[index];
      }
      return habit;
    }),
  );

const getDaysWeekElement = (habitName, completed) => {
  const arg = (index) => ({ habitName, index });
  return weekDays
    .map((name, index) =>
      completed[index]
        ? ` <button class="checked" onClick="toggleDayButton(${arg(index)})">
<img width="25" src="./assets/img/check.svg" alt="check" />
</button>`
        : `<button onClick="toggleDayButton(${arg(index)})">${name}</button>`,
    )
    .join('');
};

насколько я понимаю я браузер читает completed[index] в месте где я с помощью map() пытаюсь отрендерить блок с кнопками как undefined вместо boolean значения, но я не понимаю как это исправить

Comments

[Вадим]

насколько я понимаю я браузер читает индекс как undefined вместо цифры,

Нет. Эта ошибка говорит о том, что Вы пытаетесь прочитать элемент по индексу 0 у самого undefined.
То есть undefined[0].
Так как где именно возникает ошибка Вы решили что можно умолчать, то и гадайте дальше сами.
А лучше не гадайте, а научитесь отладке своего кода https://learn.javascript.ru/debugging-chrome

[JAdeShopKeepers]

я отредактировал вопрос, спасибо за вашу внимательность, но вы можеет обьяснить почему там происходит?

[Вадим]

JAdeShopKeepers, вызов getDaysWeekElement покажите

[JAdeShopKeepers]

Вадим, вот

const getHabitElement = ({ img, name, completed }) => `
<div class="mb-8">
   <div class="habit-header">
      <img width="80" src="${img}" alt="habit-1" />
      <span class="font-semibold text-2xl">${name}</span>
   </div>
   <div class="habit-plan">
     ${getDaysWeekElement(completed)}
   </div>
</div>`;

const render = (habits) => {
  const habitContainer = document.querySelector('.habit-container');
  habitContainer.innerHTML = habits.map((habit) => getHabitElement(habit)).join('');
};

Answer 1

[Вадим]

const getDaysWeekElement = (habitName, completed) => {
  const arg = (index) => ({ habitName, index });
  return weekDays
    .map((name, index) =>
      completed[index]
        ? ` <button class="checked" onClick="toggleDayButton(${arg(index)})">
<img width="25" src="./assets/img/check.svg" alt="check" />
</button>`
        : `<button onClick="toggleDayButton(${arg(index)})">${name}</button>`,
    )
    .join('');
};

const getHabitElement = ({ img, name, completed }) => `
<div class="mb-8">
   <div class="habit-header">
      <img width="80" src="${img}" alt="habit-1" />
      <span class="font-semibold text-2xl">${name}</span>
   </div>
   <div class="habit-plan">
     ${getDaysWeekElement(completed)} // что принимает функция getDaysWeekElement?
   </div>
</div>`;

Спойлер: она принимает 2 аргумента, completed должен быть вторым.

- ${getDaysWeekElement(completed)}
+ ${getDaysWeekElement(name, completed)}

Comments

[JAdeShopKeepers]

boolean значение, которое я выше в массиве habits указал, но менять я его (boolean) хочу по клику на кнопку

[Вадим]

JAdeShopKeepers, Перепроверьте, и ответьте ещё раз. Какие аргументы на вход ожидает функция getDaysWeekElement?

P.s. отредактировал ответ, на что нужно исправить чтобы работало.

[Вадим]

JAdeShopKeepers, если Вы научитесь отладке кода, то будете решать такие проблемы за 1 минуту.
Ровно столько у меня ушло чтобы скопировать весь Ваш код на codepen и провести debug