Несколько вопросов по React коду.?

Question

[cosonicsq]

Прошу помочь понять некоторые вещи в коде, что они делают. Я закоментировал непонятные строки. Всего 5 строк кода)

this.setState(
      {
        data, shift: Object.keys(data)[0]             // (1)   
      }, this.filter                                               // (2)
    );
  };

  onClick = ({
    target: {                                                   //(3)
      dataset: { shift }
    }
  }) => {
    this.setState(() => ({ shift }), this.filter);            // (4)
  };

    return (
      
        {days.map((day, i) => (
          <button
            key={day}
            onClick={() => this.loadDay(i)}                                  // (5)
            className={i === this.state.day ? "active" : ""}
          >
            {day}
          </button>
        ))}
   
    );
  }
}

Вопросы:
1) Object.keys(data)[0] -это возвращает название первого свойства обьекта data в виде массива?
2) Почему в setState вторым параметром передается метод filter? что он делает в данный момент?
3) Зачем в метод onClick передан обьект target? И что он делает?
4) Опять же почему здесь снова вторым параметром передается метод filter?
5) Почему в атрибут onClick передают анонимную функцию () => this.loadDay(i), а не просто метод this.loadDay?

Answer 1

[Егор Живагин]

1) Object.keys() -- возвращает массив ключей объекта. [0] -- выбирает первый элемент этого массива
2) Это коллбэк, метод вызывается сразу после обновления стейта. Почитай документацию Реакта в разделе про setState и аргументы его вызова
3) Читай про деструктуризацию. Это деструктуризация аргумента, который приходит в функцию. В данном случае, стандартного объекта event. Аналогично:

onClick = event => {
const shift = event.target.dataset.shift;
...
}

4) См пункт 2
5) Потому что нужно не просто вызвать функцию по клику, а ещё и передавать ей аргумент i . Но вот конкретно такая реализация - плохая практика

Comments

[cosonicsq]

спасибо большое!
по третьему вопросу встречный вопрос:
получается вот это:

onClick = ({
    target: {                                              
      dataset: { shift }
    }
  }) => {
    this.setState(() => ({ shift }), this.filter);           
  };

можно написать вот так:

onClick = event => {
const shift = event.target.dataset.shift;
  this.setState(() => ({ shift }), this.filter);            
  };
}

правильно?)

[Егор Живагин]

cosonicsq, ага, только на четвёртой строчке }; лишние