Как переделать эти части кода без data тегов и как переделать соответствующие им методы?

Question

[petroshevchenko1525]

Есть код моего главного файла приложения - App.js . Его я напишу в низу вопроса в спойлере.
И мне сказали что в нем нужно изменить эти две части:

Первая часть:

{daysArray.map((day, i) => (
          <button key={day} onClick={() => this.changeDay(i)} className={i === this.state.day ? "active" : ""}>{day}</button>
        ))}

Вторая часть:

{Object.keys(startDataArray).map(item => (
          <button data-category={item} onClick={this.changeCategory} className={item === category ? "active" : ""}>{item} category</button>
        ))}

метод к первой части:

changeDay = (argDay) => {
    this.setState({
        day: argDay
      },this.fetchData);
  };

метод к второй части:

changeCategory = (event) => {
    this.setState({ 
        category: event.target.dataset.category 
    },this.filter);
  };

Сказали что не нужно использовать какие-то data теги (тоесть не использовать key и data-category, и навели пример на другом коде(Redux+React) как нужно переделать.
Вот пример:
с такого кода:

{data && Object.keys(data).map(n => (
  <button data-shift={n} onClick={e => onFilter({ shift: e.target.dataset.shift })} className={n === shift ? "active" : "noActive"}>
       {n}
  </button>
  ))}

переделали на вот такой:

{data && Object.keys(data).map(n => (
  <button onClick={()=> onFilter({ shift: n })} className={n === shift ? "active" : "noActive"}>
       {n}
  </button>
  ))}

Я пробовал по аналогии с примером проверяющего (Redux-React) свой код передалать без data тегов и в самих методах убрал dataset и другое лишнее. Но к сожалению ничего не работает. Как правильно переделать эти части кода без data тегов и соответствующие им методы чтобы работало?

Answer 1

[Роман Ямчук]

Передать нужные параметры при вызове функции и использовать их в теле функции.

{Object.keys(startDataArray).map(item => (
  <button onClick={(event) => this.changeCategory(item)} className={item === category ? "active" : ""}>{item} category</button>
))}

//--//

changeCategory = (category) => {
    this.setState({ 
        category: category
    }, this.filter);
  };

Comments

[petroshevchenko1525]

спасибо большое)

[petroshevchenko1525]

а почему не работает с первой частью когда я также исправил?

{daysArray.map(it => (
          <button onClick={(ev) => this.changeDay(it)} className={it === this.state.day ? "active" : ""}>{it}</button>
        ))}

и метод:

changeDay = (argDay) => {
    this.setState({
        day: argDay
      },this.fetchData);
  };

где ошибка?

[Роман Ямчук]

petroshevchenko1525, потому что в первом примере, вы в функцию передаёте индекс элемента и там всё было верно. Вам бы не реакт, а javascript подучить

[petroshevchenko1525]

Роман Ямчук, тоесть первую часть (где метод changeDay) без атрибута key не обойтись? и оставить все как есть?

[Роман Ямчук]

petroshevchenko1525, лучше бы сначала изучили зачем нужен key